Skeleton States

Done

Skeleton screen is an animated placeholder that simulates the layout of a website or app while data is being loaded. They let the user know that some content is loading and provides an indication of what is loading, whether it's an image, text, card, and so on.

Anatomy

Why do we use skeleton states?

Skeleton states are a great replacement of traditional page loaders because they can load each piece of content at a time instead of needing to load all content at once before showing the page.

When to use

Use on high-traffic pages where resources take a bit long to load like on the Accounts dashboard. Another example is when the component contains a good amount of information, such as a list or card.

When not to use

Do not use skeleton states when there is a long-running process or importing data within tables, etc. This is when a page loader will be useful.

Specs

Color

Element	Property	Value
Skeleton	Background color	∆colorPlatformGray50 to ∆colorPlatformGray100

States

There are no state considerations for this component.

Theming

There are no theming considerations for this component.

‍

Placement

Placement depends on the design.

Behavior

The skeleton states will fade in and out to indicate that something is loading. We do not want it to be stationary due to the user thinking that the content has just been loaded as a gray container.

Developer Docs

Vue Developer Docs

Component documentation coming soon!