Infinite Scroll Gallery Block for React

Only after the visitor has scrolled. An IntersectionObserver watches a marker at the foot of the grid and loads the next eight when it comes within a short distance of the screen, up to twenty-four pictures. Before any scroll nothing loads, so the first eight are what a person sees, even on a tall screen where the foot is already in view. Past twenty-four the button takes over.

Because a list that only loads on scroll has a foot a keyboard user can never reach. The button is real, it is in the tab order from the start, and it loads the same eight. After it, focus moves to the first picture it brought, so the next Tab continues from there.

The new pictures are added below everything already on screen, and while they load eight skeleton cells with the same boxes (a picture, a title line and a place line) hold exactly the room the pictures will take, so swapping them in changes no height. The status line and button sit under the grid and move down with it. The cells fade in without moving.

A polite status line under the grid: "Loading 8 more pictures", then "16 of 32 loaded", then at the end "You've seen all 32". The list is marked busy while a batch loads, and the skeleton cells are hidden from assistive technology.

The block holds all thirty-two goods in GOODS and shows the first count. To load from an API, keep count and loading, fetch where the one-shot timer is now (DELAY) and append the result to the list; the skeletons, the status line and the focus move already follow those two values. The picture's Scene is where <img alt="" className="size-full object-cover" src={…} /> goes.

The skeleton cells are still, with no pulse, and the new pictures appear without fading. Loading behaves the same.