SkeletonDraft

Features

• Automatically matches the shape of its children.
• Allows setting a width and height for custom elements.
• Can be used on top of "loud" background colors.

When to use

At Pleo, we use skeleton loading in cases where the user experience can be enhanced by displaying placeholders for content during data fetching. This can help reduce perceived loading times and maintain layout consistency. Learn more about when to use skeleton loading.

Examples

With children

The Skeleton component is commonly used to wrap other components, automatically presenting them in a loading state. It preserves the dimensions of its children and also hides and disables any nested interactive elements.

Size

Use the width and height props to manually control the size of the skeleton.

With text

When using a Skeleton with text, wrap the text itself, rather than its parent element. This ensures that the text is replaced with a placeholder of the same size:

Border radius

For components containing complex markup, the Skeleton may not always accurately determine the border radius of its children. In such cases, you can manually supply a borderRadius to match that of the children.

Loud

For usage on darker backgrounds, the Skeleton component can be set to loud mode, which will display a brighter version of the loading state.

Full example

Accessibility

The component is designed with accessibility in mind, ensuring that it is not focusable and does not distract assistive technologies when loading content. The component uses the aria-hidden attribute to hide itself from screen readers while it's in a loading state. Additionally, it leverages the inert attribute to prevent user interaction with the component until it's fully loaded, making the page more accessible and navigable for all users.