Skeleton
What is this?
Skeleton indicators allow merchants to anticipate the dynamic content that will appear after the page loads.
Variants
Fluid
By default, the Skeleton is fluid, which means that both width and height are 100% of its container.
Loading...
Usage
import { Skeleton } from '@vtex/admin-ui'
export Example() {
return <Skeleton />
}
Props
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| csx | StyleObject | Custom styles | 🚫 | {} |
| shape | rect, circle | Skeleton's shape | 🚫 | rect |
Components
When to use a Spinner or a custom loading state instead of a Skeleton?
- Choose a Spinner when the page is loaded, and a specific request will take over a second and less than five seconds.
- Choose a custom loading state with animations, illustrations, or progress bars when the request takes more than five seconds or when the content that will load has an irregular shape, such as a graph.
What to avoid:
- Don't show a loading state for requests that take less than a second.
- Don't show a Skeleton on a page that is already loaded.
Variants
When to use a rectangle or circle Skeleton?
The Skeleton composition should closely resemble the content that will load. For example, pills should represent Tags, rectangles should represent Texts, and circles should represent Avatars.
Position
What should be the size of a Skeleton and its position in a container?
Considering left-to-right interfaces, follow these recommendations:
What to avoid:
- Position Skeletons so they closely resemble the content that will load. For example, represent Text inside a Card with a set of rectangle Skeletons inside a Card.
- If the size or position of the content that will load depends on dynamic conditions, represent a common scenario in the loading state.
- Consider that some components already have a loading state that shouldn't be customized, such as the Skeletons in Table columns.
What to avoid:
- Don't use large and generic Skeletons. For example, use a set of rectangle Skeletons to represent a Text paragraph, each with a height equal to the line height of the Text that will load.
Behavior
What should be the duration of a Skeleton?
- The Skeleton should be displayed during the initial loading of the page and should be removed as the content loads.
What to avoid:
- Don't use a Skeleton when the page takes longer than five seconds to load. Use a custom loading state instead.
What should be the animation of a Skeleton?
Skeletons have a default wave animation that is played in a loop. Don't customize this animation. Don't customize this animation.
Content
What type of content should be hidden while a page loads?
- Skeletons should replace only the content that will load through requests. For example, the label of a piece of information should remain visible during loading.
What to avoid:
- Don't replace actions with Skeletons. Use the disabled state of the component if the action can't be triggered during loading.