From cb5bb4345380f7530c7b6140813ef4b30952f224 Mon Sep 17 00:00:00 2001
From: cas <cas@vorteq.nl>
Date: Fri, 24 Jul 2026 11:17:44 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20infinite=20scroll=20te=20traag=20?=
 =?UTF-8?q?=E2=80=94=20rootMargin=20200px=E2=86=921200px,=20tot=203=20batc?=
 =?UTF-8?q?hes=20per=20trigger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html        | 11 +++++++++--
 tests/e2e.spec.js |  8 ++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index df9f937..3f8fe82 100644
--- a/index.html
+++ b/index.html
@@ -2771,9 +2771,16 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
 
     searchObserver = new IntersectionObserver((entries) => {
       if (entries[0].isIntersecting) {
-        appendSearchBatch(allItems);
+        // Load up to 3 batches at once when user scrolls fast
+        // This keeps the sentinel pushed far ahead of the viewport
+        let batchesLoaded = 0;
+        const maxBatches = 3;
+        while (batchesLoaded < maxBatches && searchVisibleCount < allItems.length) {
+          appendSearchBatch(allItems);
+          batchesLoaded++;
+        }
       }
-    }, { rootMargin: '200px' });
+    }, { rootMargin: '1200px' });
 
     searchObserver.observe(sentinel);
   }
diff --git a/tests/e2e.spec.js b/tests/e2e.spec.js
index 84919ca..7d28287 100644
--- a/tests/e2e.spec.js
+++ b/tests/e2e.spec.js
@@ -456,14 +456,14 @@ test.describe('Karby Eetdagboek', () => {
     // Sentinel should exist (there are more than 50 items)
     await expect(page.locator('#searchSentinel')).toBeAttached({ timeout: 3000 });
 
-    // Scroll sentinel into view to trigger next batch
+    // Scroll sentinel into view to trigger next batches (now loads 3 at once)
     await page.locator('#searchSentinel').scrollIntoViewIfNeeded();
-    await page.waitForTimeout(800);
+    await page.waitForTimeout(1200);
 
-    // Now more items should be rendered
+    // Now more items should be rendered (up to 3 batches of 50)
     const afterScrollCount = await page.locator('.food-item').count();
     expect(afterScrollCount).toBeGreaterThan(initialCount);
-    expect(afterScrollCount).toBeLessThanOrEqual(100); // 2nd page = 100 max
+    expect(afterScrollCount).toBeLessThanOrEqual(200); // max 4 batches total (50 + 3×50)
   });
 
   test('infinite scroll: search query resets pagination', async ({ page }) => {