The Skeleton Loader displays a placeholder representing the page's content before the page is ready to display. This component is used to improve perceived performance. This tends to improve user experience by reducing load time frustration and making the page feel more responsive.
This loader is an alternative to the Spinner component. Rather than showing an abstract spinner, it frames the content of what is to come which creates anticipation.
The component is designed to be used in place of the content being loaded. For example:
- The animation can be disabled by enabling the
prefers-reduced-motionsetting at the OS level. - Skeleton Loader has the
aria-busyattribute set totrueby default. This is to indicate that the content is loading.
The default Skeleton Loader can be used to represent a line of text. It uses the sizeIcon20 token for the height, and borderRadius20 for the border-radius. The width will be 100% unless a different width is specified.
Use the height prop to change the height of the Skeleton Loader. The height can be any valid height unit, such as px, rem, or %. It can also be one of the Paste size tokens.
In order to simulate a paragraph's line spacing, you can use the Stack component.