Skeleton loading components allow you to create components that resemble the content being loaded. This gives users an idea of what to expect, and prevents screen jump by having accurately sized placeholders while content loads.
Skeleton loaders are generally preferred over spinners, as they shift the user's focus to the content being loaded, rather than the feeling of waiting.
- Use the skeleton loading component when you are rendering a full-page.
- Use when the wait time to load the page is under 10 seconds. See the external link below for more information on this.
- If the page takes less than 1 second to load.
- Do not use skeleton loading to indicate a process (e.g download, upload, convert file). Instead, show a progress bar.
Live example
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
✓ |
|
Web (@ovotech/element) |
✓ |
|
App (@ovotech/element-native) |
❌ |
How to use it
Headings
Use the SkeletonHeading to resemble a heading. Uses the underlying heading component for size and margins.
Use the SkeletonHeading to resemble a heading. Uses the underlying heading component for size and margins.
Text
Use the SkeletonText to resemble a multi-line paragraph, the last line will be shorter than the rest.
Call to action
Use the SkeletonCTA to resemble a Call to action.
Circle
Use the SkeletonCircle to resemble an image or icon.
Properties
|
Name |
Values |
Default |
|---|---|---|
|
size |
string |
70% |
|
headingComponent |
ComponentType String |
Heading3 |
|
... |
JSX.IntrinsicElements["div"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- I don't want the skeleton loading indicator's animation to play for longer than 5 seconds, so that I can focus on other content on the page.
- As a screen reader user, I want to know the status of the page.
- As a screen reader user, I don't want parts of content to be readable before the entire document has loaded.
- As someone with a colour vision deficiency, I want to be able to easily perceive the skeleton loading indicator.
Test steps
Use these steps to check that the SkeletonLoading component has been implemented correctly:
- Turn on a screen reader.
- Navigate to the skeleton loading indicator.
- Verify that the status is announced.
- Using a colour contrast analyser, check that the colour contrast of the indicator is at least 3:1.
- Verify that the animation does not last longer than 5 seconds.
Known defects
We're aware of the following defects and have provided ways that these can be manually resolved, until this component is updated:
- When the skeleton loading indicator is present, there is nothing to describe this to people who cannot see the screen. Add "Loading" text with the VisuallyHidden component while the skeleton loading indicator is present, so that people who cannot see the component know the status of the page.
- The colours used for the indicator do not have a sufficient colour contrast ratio and may be difficult for people to perceive. Add styling to make the loading indicator darker, resulting in a colour contrast ratio of at least 3:1.
- The loading animation plays indefinitely, which may distract people when it plays alongside other content. Add scripting to stop the loading animation from playing after 5 seconds.
- It's not possible to prevent screen readers from announcing partially loaded content. Add an aria-busy="true" attribute to the content's container while it is loading. Update the attribute to be aria-busy="false" once the content has loaded.
Related components
Related patterns
External links