Infinite Scroll Loading Spinner — IntersectionObserver Load-More

Infinite scroll is often built with a scroll-position calculation — checking scrollTop + clientHeight against scrollHeight on every scroll event — which is both imprecise and expensive to run at scroll frequency. The correct, modern mechanic is a sentinel element and an IntersectionObserver: an invisible marker sits just past the last row, the browser itself tells you the instant it scrolls into view, and that single event triggers the next page load. This snippet builds the pattern properly, with a spinner that appears exactly at the list's growing edge while a page loads.

A sentinel element, not a scroll listener

The .is-sentinel div sits as the last child of the scrollable frame, after the list. Instead of attaching a scroll event handler and computing distance-from-bottom math on every single scroll tick, an IntersectionObserver is created once and told to watch that one element. The browser's own compositor tracks the intersection natively — no per-scroll-event JavaScript runs at all, which is both simpler and considerably cheaper than polling scroll position.

rootMargin gives it a head start

The observer is configured with root: <the scrollable frame> (so it measures intersection against the list's own scroll container, not the whole page) and rootMargin: '80px', which extends the "viewport" the observer checks against by 80px beyond the frame's actual visible bottom edge. That means the next page starts loading slightly before the sentinel is literally visible — while the user still has a little unread content to scroll through — so by the time they actually reach the bottom, the new rows are often already rendered rather than making them wait after arriving.

One flag prevents duplicate loads

loading is checked and set inside loadNextPage() before anything else happens, and reset only once the simulated fetch resolves. Since IntersectionObserver can fire its callback more than once while an element stays intersecting (for instance if the observed element's size or position shifts slightly), this guard is what stops a single scroll-to-bottom from accidentally triggering two overlapping page loads.

A real "end of list" state, not an infinite loop

Once page reaches MAX_PAGES, the observer calls unobserve(sentinel) to stop watching entirely (there's nothing left to load, so there's no reason to keep paying for intersection checks) and swaps the spinner for a static "You've reached the end" label — an honest terminal state rather than a spinner that would otherwise spin forever with nothing left to fetch.

Wiring it to a real API

Replace the setTimeout inside loadNextPage() with a real fetch('/api/items?page=' + page), calling renderPage() with the response's actual items inside the resolved promise, and set loading = false in a finally. The observer setup, the rootMargin head start, the duplicate-load guard, and the end-of-list handling all stay exactly the same — only the data source changes. Pair it with a skeleton card grid for a richer per-row placeholder while a page loads, or an empty state for the very first, zero-item case.