Skeleton

What is this?

Skeleton indicators allow merchants to anticipate the dynamic content that will appear after the page loads.

Variants

Rectangle

By default, Skeleton's shape is rectangular. To use this variation, the shape property has the rect value.

Circle

The shape can also be circular. To use this variation, the shape property has the circle value.

Fluid

By default, the Skeleton is fluid, which means that both width and height are 100% of its container.

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:

• 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.

• What is this?
  • Variants
  • Fluid