Sprout Social

Components

Skeleton

View on GitHub

Skeleton loaders create perceived performance and reduce user frustration around load times.

Skeleton loading is helpful when web pages or sections of content are partially loaded while the user waits for the rest of the content to finish loading. The goal of skeleton loading is to load content progressively, making users barely notice the waiting period of web services returning content.

Skeletons should be immediately replaced with real content once data becomes available. Content is loaded until no skeleton loaders are on the page anymore.

Pro tip
When using a Skeleton component, it's important to wrap it in a container with a role attribute set to status and an appropriate aria-label attribute. This helps ensure that screen readers and other assistive technologies can properly convey the purpose of the skeleton to users with screen readers.
import { Skeleton } from '@sproutsocial/racine'
<Box 

  tabIndex={0}

  role="status"

  aria-label="Content is loading">

  <Skeleton width={42} height={42} mb={400} borderRadius='pill' />

  <Skeleton width='100%' height={24} mb={300} borderRadius='inner' />

  <Skeleton width='100%' height={24} borderRadius='inner' />

</Box>

Properties