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 }) => {