Treat infinite scrolling as a paginated collection with a convenient trigger. The trigger may be automatic, but cursor ownership, item identity, viewport position, and recovery remain explicit.
An infinite scroller looks simple in a demo. Put a sentinel under the last card, observe it, and fetch another page. Production behavior is harder. A slow response can arrive after the user changes filters. A repeated record can appear on adjacent pages. An image above the viewport can decode and move the reader. Browser Back can return to a pixel offset before the old data window exists.
The system needs two separate notions of progress. The cursor tells the server where the current query continues. A stable item ID tells the client what the reader is looking at. Neither can safely replace the other.
Start with the collection contract
Model the list as normalized items, an ordered ID sequence, a page ledger, and a query generation. Each page records its input cursor, returned cursor, status, and item IDs. The request layer owns cancellation and single-flight rules. The viewport layer owns the visible anchor and restoration checkpoint.
An Intersection Observer is useful for noticing proximity to the end. It is not the state machine. Its callback can run more than once, the sentinel can remain visible after an append, and layout changes can cross the threshold again. Route every observation through one guarded loadNext() command.
The public interview prompt
Design an infinite scroller for an activity feed, search results, or product catalog. Explain:
- cursor pagination, deterministic ordering, stable tie breakers, and opaque continuation tokens;
- query generations, request cancellation, single-flight ownership, and stale responses;
- ordered merges, duplicate IDs, updated records, deletions, and empty pages;
- sentinel observation, prefetch distance, network evidence, and backpressure;
- loading, retry, offline, exhausted, permission-changed, and partial states;
- stable viewport anchoring during append, prepend, media decode, and live insertion;
- browser Back restoration, deep links, saved checkpoints, and missing anchors;
- explicit Load more controls, focus, announcements, footer reachability, and SEO paths;
- pagination versus virtualization, memory budgets, cache eviction, and long sessions;
- analytics, performance measurements, testing, rollout, and fallback behavior.
Assume the collection contains millions of records, pages normally contain 25 items, records may be inserted or deleted while the reader is present, and item heights vary after media loads. These numbers are interview assumptions, not measured product facts.
What the premium solution covers
The full solution builds the page and request state machines, defines safe cursor merges, derives a measured prefetch policy, preserves a stable visual anchor, restores a route after the data window has been evicted, and keeps loading failures operable.
Original media traces one request from sentinel observation through an ordered append, separates the collection's state rails, shows a durable restoration checkpoint, and visualizes a bounded prefetch envelope. Two deterministic labs let readers provoke stale and duplicate pages, then calculate an anchor correction after content above the viewport changes.