Skeleton
Skeleton
is used to build a skeleton frame of progressively loaded content.
- Skeleton is used to emulate a low-fi page layout while data is loaded in the background
- Simple is better: use the minimal number of elements to outline the structure
- This technique improves perceived load times by presenting UI sooner
- A “shimmering” background gradient animation suggests movement
- Consider
Spinner
if you need a simple loading state
- Skeleton is effectively a
Box
component with an animated background gradient - The basic idea is to create a rough skeleton of the page using a series of abstract shapes
- This allows the user to familiarize themselves with the layout and reduces the jarring effect of a total layout shift that one would experience with something like
Spinner
- This allows the user to familiarize themselves with the layout and reduces the jarring effect of a total layout shift that one would experience with something like
- Skeleton is a generic div
- Use properties like
height
,width
,margin
,border-radius
, etc. to emulate the document structure - Use
Grid
to establish a structured layout that doesn't rely on margin
- Use properties like
- Don’t spend time adding too much detail
- Layouts shift and content changes, so it isn’t worthwhile to create pixel-perfect facsimile
- The document will almost certainly need to reflow no matter how hard you try, but it is more performant and less jarring for the user if it happens all at once
- Apply
aria-busy
to the outermost container to indicate the loading state to screen readers
Skeletons can be built using any valid prop from Box
.
Skeleton inherits these basic props from Box
. In practice, there is very little practical use for them, but they are available if necessary.
Name | Type | Default | Description |
---|---|---|---|
children | ReactNode | The content of the Skeleton | |
component | Element | div | Alternative component used to render |
- The
aria-busy
prop should be used on the outermost container to indicate the loading state to screen readers