shadcn.io is not affiliated with official shadcn/ui
Profile Sidebar Skeleton Block for Solid
A designer's profile card that loads in place: a drawn cover, an overlapping avatar, a name, a handle and Location, Website, Joined and Team rows come in over bars, above real Follow and Message buttons.
Installation
Overview
Show a profile card with a cover while it loads, then swap the person in without moving anything, with this profile sidebar skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a designer's profile from Peristyle, a design-community site: a drawn cover, an avatar that overlaps the cover's lower edge, the name and handle, four fact rows and a foot. The card, the four fact icons (location, website, joined, team) and the Follow and Message buttons are real from the first paint; the cover, the round Avatar with the designer's initials, the name, the handle and the four values are Skeleton bars that become the profile in the same place. The cover is a drawn tiled pattern in greys, not a photograph. Follow and Message say they are not wired in this demo. For community profiles, author cards and any sidebar that introduces a person.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The designer is typed in DESIGNER. 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 do I use a real cover photo?
The cover is a fixed h-24 box that holds a bar and a drawn scene in one cell, so a picture can replace the scene without moving anything. Swap the Scene for <img alt="" className="size-full object-cover" src={cover} /> inside the same box and keep the label on the wrapper. The drawing is a seeded pattern, so it looks the same on the server and in the browser.
How does the avatar overlap the cover without shifting?
The avatar's cell has a negative top margin and a ring in the card's colour, and the bar behind it has the same size and ring, so the overlap is identical in both phases. The cover keeps its height whether the bars or the picture is showing, so the card is exactly as tall before, during and after loading.
How do I add or remove a fact row?
Each row is a dl entry: an icon with an sr-only name in the term and a Cell in the description. Add another with its icon, name and typed value, and the card grows in both phases at once. The website is set left to right even on a right-to-left 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 cover is a labelled image only once it is loaded, and the fact icons carry sr-only names, so the rows read as term and value. 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.