shadcn.io is not affiliated with official shadcn/ui
News Feed Skeleton Block for Ark UI
A local-news front page that loads in place: five stories with drawn pictures, headlines, decks and desks, and a Save button on each story that marks it and counts it.
Installation
Overview
Show a news feed while its stories load, then swap them in without moving anything, with this news feed skeleton for React with Ark UI. A hairline frame with a plus mark on each corner holds a band heading with a count of saved stories, five stories and a Show more button, from Intarsia, a local-news site. The heading and the button are real from the first paint; each little picture, headline, deck, desk and time, and each story's Save button, is a Skeleton box that becomes the data in the same cell, row by row, when you press Load. Save is real and local: it marks the story and counts it, and Reload clears the marks. The pictures are drawn from a few flat shapes, not photos. The control is an outline Button, the bands are ruled by Guides, and a polite line says what loaded. For news fronts, link roundups and any list of headlines with thumbnails.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The five stories are typed in STORIES, each with its own drawing, 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. Replace the drawn picture with an img that has fixed dimensions (and an empty alt, since the headline says it) so the box doesn't move when it arrives. 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. The picture, headline, deck and Save button each have a fixed box (the picture is 64 pixels, 56 on a phone) and the headline and deck are clamped to two lines, so a long headline can't change a row's height. The polite line under the panel reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
What does Save do?
It toggles a bookmark on the story (aria-pressed, a filled icon) and updates the saved count in the heading, and the polite line says it is kept in this tab only. Nothing is stored, and Reload clears the marks. Save is only available once the stories are in.
How are the pictures drawn, and how do I use photos?
Each story carries a handful of flat shapes in a 64 by 64 drawing, filled in weights of the foreground so they follow the theme. To use photos, swap the Thumb component for an image of the same size; the Skeleton box already has that size, so the swap moves nothing.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading stories…", 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.