Skeleton
Placeholder shapes shown while content loads: a text line, a rectangle, a circle, or a ready-made layout (text, avatar with copy, card, form, table). They pulse gently.
Usage
Import the component and render it.
import { Skeleton } from 'src/components/Skeleton/Skeleton';
<Skeleton type="text" label="Loading…" />Accessibility
Role: status, named by label ("Loading…"); the shapes inside are empty and say nothing.
- Screen readers hear the label, not the shapes. Mark the region that is loading with aria-busy="true" while the Skeleton shows.
- Pulses between opacity/full and opacity/muted (800ms, ease in and out, alternating); static when the user asks for reduced motion.
Type
Set the type prop: Text is "text", Rectangle is "rectangle", Circle is "circle", Text lines is "text-lines", Avatar + copy is "avatar-copy", Card is "card", Form is "form", Table is "table".
<Skeleton type="text" />
<Skeleton type="rectangle" />
<Skeleton type="circle" />
<Skeleton type="text-lines" />
<Skeleton type="avatar-copy" />
<Skeleton type="card" />
<Skeleton type="form" />
<Skeleton type="table" />