Skeleton loader
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
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
Video description: A light mode and dark mode skeleton loader animation showing the shimmer effect moving from left to right.
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.
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.
Video description: A search for ‘Mid century couch’ on the eBay app displays a skeleton loader before displaying results.
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.
Video description: Search results for ‘Mid century couch’ is shown on the eBay app. The second result is selected, displaying an item details page with the item image and title shown. A skeleton loader is used as placeholder for the rest of the information until it loads into view seconds later.
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.
Video description: Selecting ‘new’ for item condition on the Add more details page navigates to a ‘Finish listing’ page with a skeleton loader displaying the detailed listing.
SRP
Though skeletons are rare on SRP because the page tends to load rather quickly, they can still be leveraged when needed.
Video description: A search for ‘Furniture’ on the eBay website displays a skeleton loader on the item tiles before displaying results.
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.
Video description: Selecting a product on the ‘Furniture’ search result on the eBay website displays a skeleton loader for the item page before displaying results.
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.
Video description: A furniture product is selected on a search page, revealing a skeleton loader that shows for an extended amount of time.
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.
Video description: A skeleton loader is shown on across the table rows of an Active listings page, with divider lines placed between to display the data that will load onto the page.