fix(mobile): Nya förslag bläddrar bland recept + laddindikator (MIKRO 53)

apps/mobile/src/app/(tabs)/index.tsx

@@ -51,16 +51,22 @@ interface WhatToEatResponse {
 export default function WhatToEatScreen() {
   const [craving, setCraving] = useState("");
   const [submittedCraving, setSubmittedCraving] = useState("");
+  const [page, setPage] = useState(0);
   const { track } = useAnalytics();
 
   const query = useQuery({
     queryKey: ["what-to-eat", submittedCraving],
     queryFn: () =>
       api<WhatToEatResponse>(
-        `/v1/recommendations/what-to-eat?limit=5${submittedCraving ? `&craving=${encodeURIComponent(submittedCraving)}` : ""}`,
+        `/v1/recommendations/what-to-eat?limit=15${submittedCraving ? `&craving=${encodeURIComponent(submittedCraving)}` : ""}`,
       ),
   });
 
+  const allRecs = query.data?.recommendations ?? [];
+  const shownRecs: Recommendation[] = allRecs.length
+    ? Array.from({ length: Math.min(5, allRecs.length) }, (_, i) => allRecs[(page * 5 + i) % allRecs.length]).filter((r): r is Recommendation => r != null)
+    : [];
+
   useEffect(() => {
     if (query.data) {
       track(
@@ -87,7 +93,7 @@ export default function WhatToEatScreen() {
             placeholder={t("wte.cravingPlaceholder")}
             value={craving}
             onChangeText={setCraving}
-            onSubmitEditing={() => setSubmittedCraving(craving)}
+            onSubmitEditing={() => { setSubmittedCraving(craving); setPage(0); }}
             returnKeyType="search"
           />
         </View>
@@ -126,9 +132,9 @@ export default function WhatToEatScreen() {
             </>
           )}
 
-          {query.data.recommendations.length === 0 && <EmptyState text={t("wte.empty")} />}
+          {allRecs.length === 0 && <EmptyState text={t("wte.empty")} />}
 
-          {query.data.recommendations.map((rec, index) => (
+          {shownRecs.map((rec, index) => (
             <Card key={rec.recipeId} onPress={() => router.push(`/recipe/${rec.recipeId}`)}>
               <Row style={{ justifyContent: "space-between" }}>
                 <Heading>
@@ -167,7 +173,8 @@ export default function WhatToEatScreen() {
           <Button
             label={t("wte.refresh")}
             variant="secondary"
-            onPress={() => void query.refetch()}
+            loading={query.isFetching}
+            onPress={() => setPage((p) => p + 1)}
           />
         </>
       )}