Skeleton loader

v1.0

A skeleton is a graphical placeholder, reserving physical space in the page for content in cases where a service or action may be slow to resolve. A skeleton can be considered as an alternative to the progress spinner in many situations.

Skin
Marko
React

Guidelines

We use motion with skeleton loaders to convey that a page is not stalled and that data is still being retrieved. This movement can help reduce user uncertainty. We refer to the motion aspect of the skeleton as the “shimmer”. Please note the shimmer is primarily used on native mobile screens. This is because large, animated shapes on web pages can be visually jarring—undermining the notion of perceived speed. Skeletons should only be used for loads that take 500ms or longer.

Specs

Animate per individual skeleton box (screen width)
Animate Left to Right in 833ms
Wait 667ms after animation before looping

Choreography

While it is desirable for skeletons to naturally be replaced with content from left to right and top to bottom, that is not always the case for in-order streaming. Content fades in from 0-100% opacity with a ~17ms gap between assets to create a pleasant, fluid motion. In-order streaming should be used and may vary slightly between pages, but the end result should always feel natural and polished.

Small and medium screen size

Across native, pages may require additional requests that extend the duration of the page load. The skeleton with the shimmer effect is used across the native experience to mask load times and reduce visual latency. Please note, the following examples are for visual reference and may not actually require skeleton loaders in product.

SRP

On the SRP page, skeleton loading is used to load a grid of item tiles. This is beneficial because the layout of the grid is already known ahead of time. This example loads at around 783ms.

View Item

When navigating from the SRP to View Item page, there is content that is able to be preloaded such as the image and title. Instead of forcing skeletons across the entire page, they are only used for elements that are not yet ready. This example loads at around 950ms.

Listing Details

On this Listing Details page, there is a custom skeleton that matches the design. This is possible when the next page of the experience is known ahead of time.

Large screen size

On larger screens, pages tend to load faster through optimization on the web. When pages inherently load quickly, a skeleton placeholder without the shimmer effect should be used. As a reminder, skeletons should only be used when needed and NOT by default.

SRP

Though skeletons are rare on SRP because the page tends to load rather quickly, they can still be leveraged when needed.

View Item

Here skeletons are loaded using in-order streaming. Notice how the right column loads in a staggered motion because the bottom right content needs additional time.

View Item

In rare instances, a page using a skeleton loader may need an extended amount of time to load. While we don’t recommend using skeletons for longer loads, it may be inevitable due to connectivity issues. If this occurs, the shimmer may animate after 2.5 seconds of elapsed time. The shimmer should make a single pass followed by additional 2.5 second pauses between animations until the page is ready. This is the only exception that allows the shimmer to be used on desktop.

Tables

For tables, the header and checkboxes remain present. The rows of content are represented with simplified skeletons. Please note, tables can have a variety of loading indicators.