Skeleton
A skeleton acts as a placeholder for content, usually while the content loads.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Skeleton } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| width | number | string | '100%' | The width of the placeholder. Match it to the content that will land there. |
| height | number | string | 16 | The height of the placeholder. For text, match the line height rather than the font size. |
| isShimmering | boolean | — | Adds the moving highlight. Use it while something is genuinely loading and not once it has stalled. |
| isCircle | boolean | — | Draws a circle, for a placeholder standing in for an avatar. |
Accessibility
What the component does for you, and what it needs from you.
- A skeleton is decoration and carries no text, so a screen reader is told a region is busy rather than read a set of empty boxes.
- The shimmer respects a reduced motion preference and holds still instead.
- Announce the result when loading ends. Someone who cannot see the placeholders needs to hear that the content arrived.