Skeleton Orchestra
A skeleton-screen orchestration system: when loading finishes, the skeletons solidify into real content one by one in directional waves following the layout.
Bring this into your project
Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.
npx webberui@latest add skeleton-orchestra.enPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<SkeletonOrchestra/>
The complete example includes the preview layout and data. Install the component first, then paste this file into your project.
Installation
npx webberui@latest add https://webberui.com/r/skeleton-orchestra.en.jsonOr, once registries are configured in components.json, install it as @webberui/skeleton-orchestra.
Usage
import {
SkeletonOrchestra,
SkeletonSlot,
} from "@/components/ui/skeleton-orchestra";
<SkeletonOrchestra loading={isLoading} stagger={0.1} className="space-y-4">
<SkeletonSlot
skeleton={
<div className="size-10 rounded-full bg-neutral-200 dark:bg-neutral-800" />
}
>
<Avatar />
</SkeletonSlot>
<SkeletonSlot>
<h3>Article title</h3>
</SkeletonSlot>
<SkeletonSlot>
<p>Body copy — the default skeleton draws a rounded gray block sized to this content.</p>
</SkeletonSlot>
<SkeletonSlot index={9}>
<p>Set an index to make this passage solidify last.</p>
</SkeletonSlot>
</SkeletonOrchestra>;Props
SkeletonOrchestra
| Prop | Type | Default | Description |
|---|---|---|---|
loading | boolean | — | Whether it is in the loading state; flipping from true to false triggers the wave of solidification |
stagger | number | 0.1 | Interval between adjacent waves (seconds) |
children | React.ReactNode | — | The layout content containing SkeletonSlot elements |
className | string | — | Appended to the container's class |
SkeletonSlot
| Prop | Type | Default | Description |
|---|---|---|---|
index | number | — | Manually set the wave order (from 0); when unset, numbering follows the slots' mount order |
skeleton | React.ReactNode | — | A custom skeleton shape (a round avatar, for example); when unset, a rounded gray block is drawn to match the size of children |
children | React.ReactNode | — | The real content |
className | string | — | Appended to the slot wrapper's class |
How it works
- Wave order: without an
index, numbering follows the slots' mount order (that is, DOM order, usually top-left to bottom-right); each cell's delay = wave order ×stagger, producing a directional wave - Isomorphic skeletons: the default skeleton renders the real content as an invisible placeholder to get its size, so the gray blocks are isomorphic with the final layout and nothing jumps when it solidifies
- Cross transition:
AnimatePresence mode="popLayout"fades and shrinks the skeleton away while the content emerges with scale/opacity, the two crossing over so cells solidify one at a time - Back to loading: when
loadingflips back totrue, the skeletons take over immediately with no wave delay applied - Reduce motion: when the user has "reduce motion" enabled at the system level, there are no waves and no scaling — skeletons and content switch directly and the pulse animation is disabled too; the first render still matches the SSR output
- Accessibility: the container carries
aria-busyand the skeleton blocks arearia-hidden, so assistive technology only ever reads the real content
Suspense Reveal Queue
A reveal conductor wrapping several loading sections — whichever finishes first joins the queue, reveals follow the author's order with a minimum interval, and late sections catch up automatically.
Broadcast Bar System
A top broadcast bar system that stacks multiple announcements, rotates them through a priority queue, supports countdowns, CTAs, and dismissal memory, and springs its height changes so the content below is pushed smoothly.