Archibald/karby
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: wit vlak bij infinite scroll — animation-delay gecapped op batchgrootte

Browse source 
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)
This commit is contained in:
cas 2026-07-24 12:13:27 +02:00
parent b6c89e548d
commit 809f289a46
2 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
docker/index.html
View file

@ -2732,10 +2732,11 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
function renderFoodItemsHtml(items, startIndex) { function renderFoodItemsHtml(items, startIndex) {
return items.map((item, idx) => { return items.map((item, idx) => {
const globalIdx = startIndex + idx;
const kh = parseKh(item.kh); const kh = parseKh(item.kh);
// Cap --i at batch size: max animation delay = 49 × 50ms = 2.45s
const animIdx = idx % SEARCH_PAGE_SIZE;
return ` 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-left">
<div class="food-item-name">${escapeHtml(displayNaam(item.naam))}</div> <div class="food-item-name">${escapeHtml(displayNaam(item.naam))}</div>
<div class="food-item-cat">${escapeHtml(item.cat)}</div> <div class="food-item-cat">${escapeHtml(item.cat)}</div>

5
index.html
View file

@ -2732,10 +2732,11 @@ button:active, .btn:active, .meal-card-main:active, .dagboek-item:active, .food-
function renderFoodItemsHtml(items, startIndex) { function renderFoodItemsHtml(items, startIndex) {
return items.map((item, idx) => { return items.map((item, idx) => {
const globalIdx = startIndex + idx;
const kh = parseKh(item.kh); const kh = parseKh(item.kh);
// Cap --i at batch size: max animation delay = 49 × 50ms = 2.45s
const animIdx = idx % SEARCH_PAGE_SIZE;
return ` 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-left">
<div class="food-item-name">${escapeHtml(displayNaam(item.naam))}</div> <div class="food-item-name">${escapeHtml(displayNaam(item.naam))}</div>
<div class="food-item-cat">${escapeHtml(item.cat)}</div> <div class="food-item-cat">${escapeHtml(item.cat)}</div>