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

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
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.

React props
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