shadcn.io is not affiliated with official shadcn/ui
Avatar Group Skeleton Block for Solid
A document's people list that loads in place: the document name, six overlapping initials avatars with a +4 count and three member rows come in over bars, beneath a real heading and Invite button.
Installation
Overview
Show who is in a document while the list loads, then swap the people in without moving anything, with this avatar group skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds the people panel from Pilaster, a collaborative-docs tool, in three bands: a heading row, a stack and the members editing now. The heading "In this document" and the Invite button are real from the first paint; the document's name, the six overlapping initials in the catalog Avatar group, the "+4" count, the "10 people" line and the three member rows are Skeleton bars that become the people in the same place, the avatars appearing one after another. The count is derived from the typed list. Invite says it is not wired in this demo. For presence lists, share dialogs and any place that shows who is here.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The ten members are typed in MEMBERS; the stack shows the first six and counts the rest, and the first three are the ones editing. 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.
Where does the +4 come from?
It is derived: the stack shows SHOWN avatars and the count chip prints the length of the list minus that number, so adding a member changes the chip and the "10 people" line together. The chip is the catalog AvatarGroupCount, and it sits in a Cell like the avatars, so it has a bar of the same size while loading.
Why doesn't the stack jump when the avatars arrive?
Each avatar shares a grid cell with a round bar of the same size and ring, so the overlap is the same in both phases, and the three member rows are fixed-height. The avatars fade in by their place in the stack, 70 milliseconds apart, and not at all under reduced motion.
What does Invite do?
Nothing here: it sets the polite line to "Invite isn't wired in this demo." Until the people are 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 an invite dialog and add the person to the list when the invitation is sent.
Is it accessible?
The panel is marked busy while it loads and carries a screen-reader-only "Loading people…", 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 stack's avatars are decorative (the names are in the member rows and the count is in the "10 people" line). 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.