Skeletons are used to provide a low fidelity representation of content before it appears in a view. This improves the perceived loading time for our users.

  <section aria-label="Loading subjects list">
    <sl-skeleton effect="shimmer"></sl-skeleton>
    <sl-skeleton effect="shimmer"></sl-skeleton>
    <sl-skeleton effect="shimmer"></sl-skeleton>

When to use

Loading states

Use skeletons to represent content while data is being fetched. For instance, display a skeleton list before actual items load.

Page transitions

During page transitions or navigation, show skeletons to indicate that content is loading. This maintains user engagement.

Image loading

When images take time to load, display image placeholders using skeletons. Users perceive faster loading times.

When not to use

Misleading expectations

Don’t use skeletons if they might mislead users. For instance, showing a skeleton for a feature that won’t load can frustrate users.

Interactive example