Displays visual placeholders that mimic real content while it loads, giving the impression of faster, progressive loading.
Match the size, layout, and spacing of the real content.
Use background="neutralLight" for every skeleton element.
Use borderRadius="full" for text and icons. Match the real component for everything else, such as borderRadius="standard" on buttons and badges.
For height, use medium for Heading level 1, small for Heading 2–4, and xsmall for Text.
Use skeletons only on key content areas.
Make skeletons accessible to screen readers, and check them in dark mode.
Scale skeletons with content size and density on small screens.
Show skeletons only as long as they are needed.
Keep skeleton code lightweight so it does not slow the load.
Use a skeleton loader when:content is likely to take a while to load
the layout is complex, such as cards, tables, or multi-component layouts
the content is essential or prominent, such as job ads or profiles.
Don’t use a skeleton loader when: Loader — For indicating that content is loading in a more minimal way. Empty state — For communicating an absence of data and directing users toward their next step. Error state — For communicating a failed action and guiding users toward a resolution.