Skeleton Loader - Usage

Basic Guidelines

The Skeleton Loader component is used to indicate that content is in the process of loading by displaying a placeholder layout that mimics the final structure of the page. This helps improve user experience by giving a visual cue that data is being fetched, reducing the perception of loading time.

Skeleton Loading screens are used for medium-length loading times where the final layout is known and can be mimicked. For very short wait times or when the final content is unpredictable, the Loading Spinner component should be used instead. For longer or more complex delays where additional context is beneficial a guided loading screen is recommended (not currently a component in Sky UI).

Skeleton loading also helps prevent unexpected layout shifts that disrupt the user experience in various ways. These shifts can cause users to lose their place while reading if text moves suddenly or lead them to click the wrong link or button.

Behaviour

The Skeleton Loader component is animated with a sheen running from Left to Right. This is shown both in the Figma component and in the React component.

Skeleton screens that leverage motion that moves from Left to Right (e.g. a wave or shimmer like animation, much like Facebook or Google uses) are perceived as shorter in duration than skeletons that pulse (opacity fading in and out.)

Variants Usage

Font Style Variants

The font style types simplify choosing the right Skeleton Loader size to match your chosen text, you do not need to match every line of text, as long as you give an approximation. The line heights of each font style have been incorporated into the top and bottom margin of the variants.

Rectangle Variant

The Rectangle shape type allows you to replicate any design needed for your skeleton loader page.

Colour Usage

Do not change the Skeleton Loader's colour or sheen. They are designed to minimise cognitive load and maintain consistency across the site.

Notes on Accessibility

When using a skeleton loader, it's important to ensure that assistive technologies properly convey its purpose. Since skeleton loaders do not contain meaningful content, they should be hidden from screen readers to prevent confusion.