From 809f289a462def80d2b35dc029bb9bd633a1225a Mon Sep 17 00:00:00 2001
From: cas <cas@vorteq.nl>
Date: Fri, 24 Jul 2026 12:13:27 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20wit=20vlak=20bij=20infinite=20scroll=20?=
 =?UTF-8?q?=E2=80=94=20animation-delay=20gecapped=20op=20batchgrootte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: --i werd op globalIdx gezet (0–2327) → CSS animation-delay = --i × 50ms
→ item 2000 kreeg 100s delay en was nooit zichtbaar.

Fix: --i = idx % SEARCH_PAGE_SIZE (max 49, delay max 2.45s)
---
 docker/index.html | 5 +++--
 index.html        | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docker/index.html b/docker/index.html
index 3f8fe82..79bba48 100644
--- a/docker/index.html
+++ b/docker/index.html
@@ -2732,10 +2732,11 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
 
   function renderFoodItemsHtml(items, startIndex) {
     return items.map((item, idx) => {
-      const globalIdx = startIndex + idx;
       const kh = parseKh(item.kh);
+      // Cap --i at batch size: max animation delay = 49 × 50ms = 2.45s
+      const animIdx = idx % SEARCH_PAGE_SIZE;
       return `
-        <li class="food-item" data-index="${voedingsmiddelen.indexOf(item)}" style="--i:${globalIdx}" role="button" tabindex="0">
+        <li class="food-item" data-index="${voedingsmiddelen.indexOf(item)}" style="--i:${animIdx}" role="button" tabindex="0">
           <div class="food-item-left">
             <div class="food-item-name">${escapeHtml(displayNaam(item.naam))}</div>
             <div class="food-item-cat">${escapeHtml(item.cat)}</div>
diff --git a/index.html b/index.html
index 3f8fe82..79bba48 100644
--- a/index.html
+++ b/index.html
@@ -2732,10 +2732,11 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
 
   function renderFoodItemsHtml(items, startIndex) {
     return items.map((item, idx) => {
-      const globalIdx = startIndex + idx;
       const kh = parseKh(item.kh);
+      // Cap --i at batch size: max animation delay = 49 × 50ms = 2.45s
+      const animIdx = idx % SEARCH_PAGE_SIZE;
       return `
-        <li class="food-item" data-index="${voedingsmiddelen.indexOf(item)}" style="--i:${globalIdx}" role="button" tabindex="0">
+        <li class="food-item" data-index="${voedingsmiddelen.indexOf(item)}" style="--i:${animIdx}" role="button" tabindex="0">
           <div class="food-item-left">
             <div class="food-item-name">${escapeHtml(displayNaam(item.naam))}</div>
             <div class="food-item-cat">${escapeHtml(item.cat)}</div>