shadcn.io is not affiliated with official shadcn/ui
Profile Card Skeleton Block for Solid
A staff card that loads in place: an initials avatar, a name, an email, a role badge and Phone, Office and Joined values come in over bars when you press Load, above real Message and View profile buttons.
Installation
Overview
Show a person's card while it loads, then swap the details in without moving anything, with this profile card skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a staff card from Niello, a staff directory, in three bands: the person, the facts and a foot. The card, the three fact labels (Phone, Office, Joined) and the Message and View profile buttons are real from the first paint; the round Avatar with the person's initials, the name, the email, the role Badge and the three values are Skeleton bars that become the person in the same place, one after another. The bands are ruled by Guides and the control is an outline Button. Message and View profile say they are not wired in this demo. For staff directories, contact cards 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 person is typed in PERSON. 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, and so does every other value: the name, the email, the badge and the three facts are Cells whose larger layer sets the box. The two buttons are real in both phases, so the foot never changes, and the polite line reserves two lines. The card is exactly as tall before, during and after loading at every width.
Why is the role a badge, and how do I change it?
A role is short, fixed text from a small set, which is what a badge is for. Change role in PERSON, or pick another Badge variant. The badge sits in a Cell with fit, so its focus ring and border are never clipped by the cell's text truncation.
What do Message and View profile do?
Nothing here: each sets the polite line to "<Label> isn't wired in this demo." Until the person is in, both buttons are aria-disabled rather than disabled, so they keep their place in the tab order and focus never moves. In your app, Message opens a composer or a mail link and View profile navigates to the person's page.
Is it accessible?
The card is marked busy while it loads and carries a screen-reader-only "Loading profile…", 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 email and the phone number are read left to right even in a right-to-left page. 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.