Components / InfiniteLoader
InfiniteLoader
The next-page indicator for an infinitely-scrolling list or grid: generations, research, the creative library, the catalog and content pickers. Render it under the list, guarded on the query's own isFetchingNextPage. For a first load (no rows yet) use skeletons shaped like what is coming, not this; for a full-panel load center a size-8 Spinner in the region.
import { InfiniteLoader } from '@layers/ui/infinite-loader'Rendered stock
House rules
- Every infinite list uses this component. Never a bare Spinner under the grid and never a "Loading more..." text line. The treatment bifurcated four ways across five call sites before it was promoted, which is what a design system exists to stop.
- It spans the scroll region and centers. The load concerns the whole list, so a spinner parked under the left-hand cell reads as a broken tile.
- The guard stays at the call site — the component owns the treatment, the query owns the timing. `{isFetchingNextPage && <InfiniteLoader />}` for a list the user pages by scrolling. A list that AUTO-pages from an effect guards on `{(hasNextPage || isFetchingNextPage) && …}`: between a page landing and the next fetch starting, both flags are false for a frame, and on a filtered list whose empty state is (correctly) suppressed while pages remain, that frame renders nothing at all.
- Sits INSIDE the scrolled region, below the grid. It is content, not chrome, so it must not be sticky and must not sit outside the scroll box.