Skip to content
Paste
UX Platform
Change the site theme
GitHub

Skeleton Loader

A component that gives users a hint of what type of information will be loaded on a page and helps reduce the perceived time a page takes to load.

Code ready:
Code done
Design assets:Pending
Documentation:
Documentation done
Peer review:Pending
Status
Production
Version
0.1.0
Sources
Storybook
Import from
@twilio-paste/core/skeleton-loader — or — @twilio-paste/skeleton-loader

Guidelines#

About Skeleton Loader#

The Skeleton Loader displays a placeholder representing the page's content before the page is ready to display. This component is used to improve perceived performancelink takes you to an external page. This tends to improve user experience by reducing load time frustration and making the page feel more responsive.

This loader is an alternative to the Spinner component. Rather than showing an abstract spinner, it frames the content of what is to come which creates anticipation.

The component is designed to be used in place of the content being loaded. For example:

Accessibility#

  • The animation can be disabled by enabling the prefers-reduced-motion setting at the OS level.
  • Skeleton Loader has the aria-busy attribute set to true by default. This is to indicate that the content is loading.

Examples#

Default Skeleton Loader#

The default Skeleton Loader can be used to represent a line of text. It uses the sizeIcon20 token for the height, and borderRadius20 for the border-radius. The width will be 100% unless a different width is specified.

Changing the Skeleton Loader height#

Use the height prop to change the height of the Skeleton Loader. The height can be any valid height unit, such as px, rem, or %. It can also be one of the Paste size tokens.

Loading text#

Loading a paragraph#

In order to simulate a paragraph's line spacing, you can use the Stack component.

Loading a heading#

Loading buttons#

Loading an avatar#

Loading an icon#

Loading a card#

Loading a table#

ContactsDate AddedLast Opened

Anatomy#

General#

PropertyDefault tokenModifiable?
backgroundColorcolorBackgroundStrongNo
borderRadiusborderRadius20Yes
heightsizeIcon20Yes

Usage Guide#

API#

Installation#

yarn add @twilio-paste/skeleton-loader - or - yarn add @twilio-paste/core

Usage#

import {SkeletonLoader} from '@twilio-paste/skeleton-loader';
import {Text} from '@twilio-paste/text';
const SkeletonLoaderExample = () => {
const [loaded] = React.useState(false);
return <>{loaded ? <Text as="span">Single line of text</Text> : <SkeletonLoader width="100px" />}</>;
};

Props#

PropTypeDescriptionDefault
display?ResponsiveValue<CSS.DisplayProperty>
width?ResponsiveValue<WidthOptions>
minWidth?ResponsiveValue<MinWidthOptions>
maxWidth?ResponsiveValue<MaxWidthOptions>
height?ResponsiveValue<HeightOptions>sizeIcon20
minHeight?ResponsiveValue<MinHeightOptions>
maxHeight?ResponsiveValue<MaxHeightOptions>
size?ResponsiveValue<WidthOptions>
borderRadius?ResponsiveValue<keyof ThemeShape['radii']>borderRadius20
borderTopLeftRadius?ResponsiveValue<keyof ThemeShape['radii']>
borderTopRightRadius?ResponsiveValue<keyof ThemeShape['radii']>
borderBottomRightRadius?ResponsiveValue<keyof ThemeShape['radii']>
borderBottomLeftRadius?ResponsiveValue<keyof ThemeShape['radii']>

Black lives matter.