HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
When to use
When not to use
Anatomy
Components

Skeleton

Skeletons act as placeholder previews for UI elements so that users are provided with a structure of a loading page. This helps users to anticipate where and what types of content are loading.

When to use

Skeletons are used on all pages to provide a visual layout of the content being loaded. They help users perceive a loading period as being shorter in duration.

When not to use

Skeletons should not be used if:

  • The data or elements being loaded are unknown.
  • The user is awaiting feedback for in-context actions such as submitting a form or fetching search results.
    • The Spinner component may be more appropriate.
  • The loading process takes more than a few minutes to load.
    • Pair with a message or notification to provide the user with better visibility of a system’s status.

Anatomy

Skeletons come in three different shapes - circular, rounded, and rectangular. The shape, size, and elevation of a Skeleton are all dependent on the UI elements that are loading. Grommet has added skeleton property in order to make it easy to switch between a skeleton state and data-rich state for a variety of components. The components that currently support skeleton are:

  • Text, Paragraph, Heading
  • Button
  • Box, Card, Pageheader, Footer, Header

Related

Related content you may find useful when using Skeleton.

Box

Boxes are containers that drive the layout of your content. Flexible props allow the behavior of content to be defined to optimize the user experience.

Button

Buttons are graphic elements that indicate to users that actions can be performed.
HPE Spinner preview

Spinner

Spinner is a small motion graphic element that indicates a loading state for quick, asynchronous tasks.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page