shadcn.io is not affiliated with official shadcn/ui
Infinite Scroll Gallery Block for Ark UI
A hairline grid of drawn farmers-market still lifes that loads eight at a time as the foot nears, with skeleton cells that hold the space, a polite count, a real Load more button and an end that says so.
Installation
Overview
A progressive-loading gallery for React with Ark UI, for Stallside, a farmers-market app. A compact header sits over a grid of drawn still lifes (a bowl of fruit, a loaf, jars, a plant, a plate) on shared hairlines that run from rail to rail: two across on a phone, four from md. Eight pictures show first. Once the visitor scrolls, the next eight load as the foot nears, up to twenty-four; a real Load more button is always there, for keyboard users and for the last eight, and at the end the block says "You've seen all 32". While a batch loads, eight skeleton cells stand in the exact space the next two rows will take, so nothing moves when the pictures arrive, and a polite status line reads "16 of 32 loaded". The pictures are drawn, not photographed. It's built from Skeleton, Button and Guides, with an IntersectionObserver and a short timer standing in for a server, and your theme's tokens for every colour. The market, its stalls and its goods are made up for the example.
FAQ
When does it load by itself?
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.
Why a Load more button as well?
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.
How does it avoid jumping?
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.
What does a screen reader hear?
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.
How do I connect it to a server?
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.