shadcn.io is not affiliated with official shadcn/ui
Gallery Grid Skeleton Block for Svelte
A photo album that loads in place: six pictures on shared hairlines, three columns on a wide screen and two on a phone, bars that become drawn scenes with a title and place when you press Load.
Installation
Overview
Show a photo grid while its pictures load, then swap them in without moving anything, with this gallery grid skeleton for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a band heading ("Field trip") over six pictures on shared hairlines, from Chert, a school-trip album app: three columns from the small breakpoint and two on a phone. The heading and the grid are real from the first paint; each picture, its title and place, and the "6 photos" count are Skeleton bars that become the album in the same place when you press Load, tile by tile in reading order. The pictures are six different drawn scenes, never photographs, each in the same 4:3 box. It's built from Skeleton, Guides and Button, with a CSS entrance only. For albums, portfolios and any grid of pictures that waits for its images.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The six photos are typed in PHOTOS, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real tiles when they arrive. The bars are derived from the same data as the content, so keep one component for both.
Why don't the tiles jump when the pictures arrive?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. Every picture has the same 4:3 box from the aspect-[4/3] class and every caption holds two lines. The frame and the labels are real in both phases and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
How do I use real photographs?
Swap the Pic scene for an img that fills the same box (object-cover) and keep the alt text from look. Because the box comes from the aspect ratio class and not from the image, a slow picture never moves the grid.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading photos…", and the polite line announces what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant. Each tile is a figure with its picture described and its title and place as the caption.