Skeleton text
Use skeleton text to replace lines of text while content is in a loading state.
On this page
On this page
Usage
Skeleton text may be used to improve perceived performance by rendering a rough representation of text content that is still loading.
However, it is important to avoid using skeleton text to replace interactive elements that are still loading. Instead, hide interactive elements that are still loading until they are ready to be displayed.
Hide interactive elements that are still loading
Don't use skeleton text to replace the text in interactive elements that are still loading
Options
Sizes
Skeleton text sizes are designed to match the font sizes and line heights defined in Primer. See typographhy docs and Primitives Primitives for details.
Acccessibility
Refer to the loading pattern accessibility guidelines. Specifically, the secion about avoiding over-announcing loading states.