Infinite Scrolling

const response = await fetch("/api/items");

// Topic: Infinite Scrolling
const response = { status: 200, items: ['Svelte'] };
console.log(response.status + ' ' + response.items[0]);

// Expected Output: 200 Svelte

200 Svelte

• 1Infinite Scrolling relies on incremental page loading triggered near the end of visible content for this infinite, scrolling lesson.
• 2Track cursor, loading, completion, and duplicate-request state explicitly. Keep decisions specific to infinite, scrolling.
• 3Its main failure mode is Repeated observer triggers can load the same page multiple times. Do not copy assumptions from a neighboring topic into infinite, scrolling.
• 4Useful evidence is duplicate-free page loading measured for infinite, scrolling.

• 1Identify the owning component, store, action, route, load function, or server handler.
• 2Keep state local until multiple owners genuinely need it.
• 3Keep server secrets and validation outside browser components.
• 4Define cleanup for subscriptions, actions, timers, and requests.

• 1Test first page, rapid triggers, errors, end-of-list, and restoration. Include an assertion that directly exercises infinite, scrolling.
• 2Check initial render, assignment-driven updates, user interaction, and cleanup.
• 3Confirm keyboard and screen-reader behavior for visible UI.
• 4Measure production output only after correctness passes.

• 1Build the smallest Infinite Scrolling example.
• 2Introduce this failure: Repeated observer triggers can load the same page multiple times. Do not copy assumptions from a neighboring topic into infinite, scrolling.
• 3Correct it using this rule: Track cursor, loading, completion, and duplicate-request state explicitly. Keep decisions specific to infinite, scrolling.
• 4Record duplicate-free page loading measured for infinite, scrolling before and after the change.