Shimmer

A shimmer is an animated placeholder that shows when a page’s contents are still loading and not yet actionable. Any areas that have been loaded can be used already.

• Interactive Playground
• Anatomy
• Type
• Behavior
• Related Content

The Interactive Playground allows you to experiment with various shimmer formats. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div
  aria-busy="true"
  aria-live="polite"
  role="alert"
  class="neo-shimmer neo-shimmer__rectangle"
>
</div>

<Shimmer loopInfinitely />

• Shape:

  This replaces page elements that are still loading, such as text and text fields, avatars, icons, and images. Use the correct shape for the type of content each represents.

• Animation:

  This is a moving shaded band that travels from Left to Right to show that the object is still loading.

There are two variants for a shimmer that affect the way pages are loaded and what elements appear first. The format and use of each is outlined below.

Dynamic Content vs Static Content

Certain elements on a page never change, such as headers, titles, copy text, etc. Using this type, these elements are loaded first as they can be processed quickly. Page content that can change, such as table data and variables, graphs and settings, will be loaded after the static content is complete.

DO: Use the actual content for parts of the page that do not change (static content). For elements that are quick to load, such as headings, body copy, buttons, and borders, include these as static elements of the design. Use a shimmer when loading the variable content, not the containers.

DON'T: Do not use a shimmer to load all of the elements on the page as this will extend the time needed for the page to appear.

Progressive Loading

Progressive loading is a technique that loads pages in batches. The fastest items to load are prioritized, followed by progressively more complex items that take longer.

The first batch to load should be the page’s basic structural elements, fixed and non-data text. Following batches include images, content outside of the viewport, interactive components, and variable text.

Displayed below are some examples of proper and improper usage of the Shimmer component.

DO: Use a mix of shimmer shapes to mimic the content that is loading (text, avatar, etc.).

DON'T: Do not use a single shape to cover multiple items.

DO: Use gray as the base color for the shimmer.

DON'T: Do not use any color but gray for the shimmer.