Skeleton
A skeleton is a placeholder for content, usually shown while the content loads.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 appear there. |
| height | number | string | 16 | The height of the placeholder. For text, match the line height rather than the font size. |
| isShimmering | boolean | None | Adds a moving highlight. Use it while content is loading, and turn it off if loading has stalled. |
| isCircle | boolean | None | Draws a circle, as a placeholder for an avatar. |
Accessibility
What the component does for you, and what it needs from you.
- A skeleton is decoration with no text. Screen readers are told the region is busy, instead of reading out empty boxes.
- The shimmer stops when someone has turned on reduced motion.
- Announce when loading ends. People who cannot see the placeholders need to know the content has loaded.