shadcn.io is not affiliated with official shadcn/ui
Blog Post Skeleton Block for React Aria
A long read that loads in place: a two-line title, a byline, a drawn lake picture and four paragraphs come in over bars, the words arriving one after another, beneath a real Craft journal label.
Installation
Overview
Show a long article while it loads, then swap the words in without moving anything, with this blog post skeleton for React with React Aria. A hairline frame with a plus mark on each corner holds an article from Planish, a metalwork craft journal, in three bands: the title and byline, a hero picture and four paragraphs. The "Craft journal" label is real from the first paint; the two-line title, the author's initials Avatar, name, date and reading time, the drawn lake picture and the paragraphs are Skeleton bars that become the article in the same place, each paragraph coming in a word at a time through a Skeleton Text effect. The picture is a drawn lake in greys, not a photograph. It is the tallest of the skeleton blocks and still sits under two screens. For journals, news pages and any long read.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The article is typed in ARTICLE, with its paragraphs in a list, and the number of bars in each paragraph is its lines. 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 card from your query's pending state, or use the bars as a Suspense fallback and render the real content when it arrives. Keep one component for the bars and the data so they can't drift apart.
How many bars should a paragraph have?
About as many as the text will take at your widest layout; the exact number doesn't matter for layout. Each paragraph is a Skeleton Text effect whose bars and words share one grid cell, so the taller of the two holds the height, and on a phone, where the words take more lines, the cell grows in both phases at once. Set lines in the paragraph's entry.
How do I use a real hero image?
The hero is a fixed-height box (h-40, h-48 from the small breakpoint) holding a bar and a drawn scene in one cell. Swap the scene for <img alt="" className="size-full object-cover" src={article.hero} /> inside the same box and give the wrapper a label that describes the image. The box keeps its height whether the bar, the drawing or the photo is showing.
Why doesn't the article jump when the data arrives?
The title, the byline, the hero and every paragraph each hold their own box, and the polite line reserves two lines, so the article is exactly as tall before, during and after loading at every width. The only thing that moves is opacity, and under reduced motion not even that.
Is it accessible?
The article is marked busy while it loads and carries a screen-reader-only "Loading article…", 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 title is a real heading from the first paint, and each paragraph is read once, as its text, when it has loaded. 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.