# Skeleton

Source: https://design.ritchiebros.com/components/feedback/skeleton/

Skeletons provide a low-fidelity representation of content before it appears, improving perceived load time. Use them for the dynamic parts of a page.

## Figma

The Figma reference for **Skeleton** will appear here once the design link is added.

## Storybook

Interactive examples for **Skeleton** will render here once the Storybook link is wired in.

## Best practices

- Use skeletons when page content loads all at once, to preview the eventual layout.
- Match the number and shape of skeleton lines to the content being loaded so it’s an accurate preview.
- Use skeletons inside any content container, and when content loads after the main page.

## Do’s and don’ts

**Do:** Use skeletons for dynamic content that changes on load.

**Don’t:** Use skeletons for static content, or show placeholder text that will change once loaded.

## Related components

- [Progress](https://design.ritchiebros.com/components/feedback/progress/)
- [Backdrop](https://design.ritchiebros.com/components/feedback/backdrop/)