Skeleton
The shape of content that has not arrived yet.
import { Skeleton } from '@textui/core';
<Skeleton lines={3} widths={[100, 80, 60]} />
Props
| Prop | Type | Default | |
| — | — | — | — |
| lines | number | | |
| widths | number[] | | Width of each line, in cells or as a fraction of the box. |
Plus everything on BoxProps.
widths are percentages, and varying them is the whole trick: three identical
bars read as a bar chart, while three ragged ones read as a paragraph.
Worth it when the layout is known and the data is not, so that arriving content does not shift the screen. Not worth it for anything that usually resolves in one frame.
See also
- Spinner - when the shape is not known either
- EmptyState - when nothing is coming