shadcn.io is not affiliated with official shadcn/ui
Article List Skeleton Block for Ark UI
A text-only engineering blog index that loads in place: five articles with titles, two-line descriptions and bylines, and a Sort menu that reorders them by date or reading time.
Installation
Overview
Show an article list while its posts load, then swap them in without moving anything, with this article list skeleton for React with Ark UI. A hairline frame with a plus mark on each corner holds a band heading, a Sort menu and five text-only articles from Largo, an engineering blog. The heading and the menu are real from the first paint; each title and byline (initials, name, minutes to read, date) is a Skeleton bar that becomes the data in the same cell, and each two-line description is set by the catalog's text placeholder, whose bars become the words a few at a time. Sort is local: it puts the same five articles in newest-first or shortest-read-first order. The control is an outline Button, the bands are ruled by Guides, and a polite line says what loaded. No pictures, so it suits writing-led lists, release notes and archives.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The five posts are typed in POSTS, 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 rows when they arrive. Sort would send the order to your query instead of sorting the array. The bars are derived from the same array as the data, so keep one row component for both.
Why doesn't the page jump when the data arrives?
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. Each description sits in the catalog's text placeholder, which draws its bars and its words in one grid cell, so the taller of the two holds the height; titles and bylines use the same cell, and sorting only reorders five rows of the same set. The polite line under the panel reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
How does Sort work?
It is a native select with two options. Newest first is the order the posts are typed in; Shortest read first sorts a copy by minutes, keeping the typed order for equal times. The rows are keyed by post, so the same rows move, and the polite line names the order once the data is in.
What is the description placeholder?
SkeletonTextEffect from the catalog draws shimmering bars, one per line, and the words of the real text in the same grid cell. When loading ends the bars fade and the words come in a few at a time (instantly under reduced motion). Pass it the number of lines the text usually takes, the text and a specific label for screen readers.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading posts…", 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.