Skeleton

Provides visual placeholders that represent interface elements during loading, improving user experience and perceived performance

Best practices

The Skeleton component displays a placeholder representing an element or content before they are ready to be displayed. This component is used to improve perceived performance that tends to improve user experience by reducing load time frustration and making the page feel more responsive.

If content takes more than a couple of seconds to load, consider using a skeleton loader. For faster loading times, consider the Spinner component instead as the overhead of the skeleton loader may not be worth it and can even cause a perceived slowdown.
A Skeleton should match the visual hierarchy of the actual content. This helps users anticipate the structure and layout of the loaded content.

When to use

If the visual layout/format of the content being loaded is known ahead of time.

When the placeholder content matches the actual content being loaded to avoid creating a jumpy loading experience.

Meant to be used specifically on a white background (dark on dark mode).

When not to use

If the visual layout/format of the content being loaded is unknown, or you need to indicate processing, or that change will occur on the page (rather than loading UI elements) – consider using the spinner instead.

To represent static content that won’t change when the page has been loaded.

Anatomy

Listing some of the separate elements of the skeleton loader component

Label and small text

Small titles and paragraph text

Image

Building blocks

Visualising all individual skeleton blocks in various sizes

Individual blocks for creating skeletons:

Text block – Small, medium, large

Box – Small, medium, large, full

Button – Default medium/small and Icon medium/small

Circle – Small, medium, large

Surface – Default, raised, overlay

Components

Product card

Order card

Search results

Order status

Behaviour

Responsive behaviour

All Skeleton components are adapted for small and large screens. Please note that the product card skeleton fits on all screen sizes without any adjustments and does not need a mobile version.