shadcn.io is not affiliated with official shadcn/ui
Social Post Skeleton Block for Svelte
A short post that loads in place: an author row, a three-line text, a drawn mountain picture and Like and Comment counts come in over bars, with a Like toggle that adds one to its count.
Installation
Overview
Show a post while it loads, then swap the author, the text and the picture in without moving anything, with this social post skeleton for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a post from Pizzicato, a short-posts network, in four bands: the author, the text, a picture and a foot. The card, the post menu button and the Like, Comment and Share labels are real from the first paint; the initials Avatar, the name, the handle and day, the three-line text, the drawn picture and the two counts are Skeleton bars that become the post in the same place, the text coming in a word at a time. Like is a pressed Toggle that moves its count by one; the menu, Comment and Share say they are not wired in this demo. The picture is a drawn mountain range in greys, not a photograph. For feeds, timelines and any post with a picture and reactions.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The post is typed in POST. 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 does the Like toggle work?
It is a pressed toggle: aria-pressed carries the state, the heart fills when it is on, and the count is the typed number plus one when it is pressed, so the count and the state can't drift apart. The foreground fills the pressed button, never the primary colour. The press is kept in this tab only, the polite line says so, and Load and Reload clear it. In your app, send the request from the press handler and set the pressed state from the response.
How do I use a real photo?
The picture is a fixed-height box (h-48, h-56 from the small breakpoint) that holds a bar and a drawn scene in one cell. Swap the scene for <img alt="" className="size-full object-cover" src={post.picture} /> inside the same box and give the wrapper a label that describes the photo. The box keeps its height, so the card does not move when the image arrives or fails.
Why doesn't the post jump when the data arrives?
The text bars and words share one grid cell inside the Skeleton Text effect, so the taller holds the height at any phone width; the picture has a fixed height; every count shares a cell with its bar. The foot's three buttons are real in both phases and the polite line reserves two lines, so the card is exactly as tall before, during and after loading.
Is it accessible?
The post is marked busy while it loads and carries a screen-reader-only "Loading post…", 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 post menu, Like, Comment and Share are aria-disabled while loading rather than disabled, so they keep their place in the tab order. 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.