imitation
Skeleton
A placeholder while content loads.
SkeletonPlaceholder while loading
In context
Project list loadingRows shaped like the real list
Loading 5 projects
Props
| Prop | Type | Required | Default |
|---|---|---|---|
variant | SkeletonVariant | undefined | No | text |
active | boolean | undefined | No | true |
lines | number | undefined | No | 3 |
width | string | number | undefined | No | — |
height | string | number | undefined | No | — |
className | string | undefined | No | — |
Accessibility
The whole thing is aria-hidden="true". Announce the loading state once, from an aria-live region or Spin, rather than reading every placeholder shape.
data-rebar-* attributes
data-rebar-component="skeleton", data-rebar-variant, data-rebar-part="line" on each row of the text variant.
Migrating to Ant Design
Not codemod-covered: AntD's Skeleton composes Skeleton.Avatar/Skeleton.Button/Skeleton.Input rather than one component with a variant.