Skeleton display text

Skeleton display text is used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.


Examples

Use this component to represent medium and large display text such as large metrics on the reports index page, or for page titles.

Drag to resize example
<SkeletonDisplayText size="medium" />
Name
Type
Description
size
enum
Size of the text

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Things like slow internet connection, outdated hardware, and data fetching restrictions can create long wait times for merchants when loading data and UI.

Solution

With skeleton display text we can create the illusion of faster load times by showing layouts and static content before the data from the request is returned.


Best practices

Skeleton display text component should:

  • Give merchants an indication of what the page content will be once loaded
  • Use real content for display text that never changes

Content guidelines

Skeleton display text

Show static display text that that never changes on a page. For example, keep page titles, such as Products on the product index page, but use skeleton loading for page titles that change on the product show page.

Do

Show actual display text for static content and use skeleton display text for dynamic content. Image showing skeleton display text for dynamic content

Don’t

Use skeleton display text for static content or placeholder content for dynamic content. Image showing skeleton display text for static content and placeholder text for dynamic content

Do

Show skeleton display text for dynamic page titles.

Image showing skeleton display text for dynamic page title