shadcn.io is not affiliated with official shadcn/ui
Card With Avatar Skeleton Block for Ark UI
A stand-up update card that loads in place: an initials avatar, a name, a role, the day, a three-line update and a reply count come in over bars when you press Load, above a real Reply button.
Installation
Overview
Show a card about a person while it loads, then swap the content in without moving anything, with this card with avatar skeleton for React with Ark UI. A hairline frame with a plus mark on each corner holds an update from Dimity, an async stand-up tool, in three bands: the author, the update and a foot. The card and the Reply button are real from the first paint; the round Avatar with the author's initials, the name, the role and day, the three-line update and the reply count are Skeleton bars that become the update in the same place. The avatar and its bar share one round box, the update is a Skeleton Text effect whose words come in one after another, and the bands are ruled by Guides. Reply is a ghost Button that says it is not wired in this demo. For stand-ups, comments, replies and any card that starts with a person.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The update is typed in UPDATE. 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.
Why doesn't the card jump when the data arrives?
The avatar and its round bar share one grid cell, the name and the role-and-day line are Cells whose text layer sets the width, and the update's bars and words share one cell. The foot holds a fixed row with the reply count and the Reply button, which is real in both phases. The polite line reserves two lines, so the card is exactly as tall before, during and after loading.
How do I show a photo instead of initials?
Put an AvatarImage before AvatarFallback inside the same Avatar; the initials stay as the fallback while the image loads or if it fails. The round bar already holds the avatar's box (size-10), so nothing moves. Keep the initials in the data (initials) so the fallback is always there.
What does Reply do?
Nothing here: it sets the polite line to "Reply isn't wired in this demo." Until the update is in, the button is aria-disabled rather than disabled, so it keeps its place in the tab order and focus never moves. In your app, open a composer under the card, and add the reply to the count when it is sent.
Is it accessible?
The card is marked busy while it loads and carries a screen-reader-only "Loading update…", 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.