Skeleton

Skeletons are loaders used as placeholders instead of actual content prior to being loaded completely.

Variants

There are 4 different types of skeletons provided in GEL as MVP.

Demo

Guidance

• Avatars, cards, charts, content blocks, lists, and tables are good candidates for a skeleton state.
• Use rounded corners, even for rectangular shapes. Shapes follow the standard spacing guidelines.
• Each shape should represent content in a recognizable way. For example, a long rectangle for a line of text or a circle for an avatar.

When to use

• Offer a simplified preview of loading content to help manage user expectations while decreasing perceived load time.
• Use skeleton on high-traffic pages, such as account dashboard, and pages with tables, lists etc.

When not to use

• Instantly loading content doesn't need a skeleton loader.
• A skeleton loader shouldn’t be used in combination with a spinner, choose the one that fits the use case best.
• If a backround action is taking place such as importing data or exporting reports, consider using a progress bar instead.

Considerations

• Don't: Load skeleton before progress spinner if a spinner is being used.

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP