Skip to main content

Skeleton

Used to display a loading state for page content.

Import

import { Skeleton } from '@pluralsight/react'

Anatomy

  1. Container
  2. Content (optional)
  3. Text (optional)

Usage

Text Skeleton

Used to represent where lines of text may appear within your page.

Result
Loading...
Live Editor

Content Block Skeleton

Used to represent where a block of content may appear within your page.

Result
Loading...
Live Editor

Circular Skeleton

Used to represent where circular shaped content may appear within your page.

Result
Loading...
Live Editor

Fallback Example

Used to design a Profile Card loading state to pass into a React Suspense component via the fallback property to easily managing the show/hide logic.

Result
Loading...
Live Editor
Diving deeper into page loading

Learn more about the page loading pattern in the Page Loading Pattern lesson.

Customizing

There are 3 ways to customize the Skeleton component.

1. Unused Classes

Each component layer of the Skeleton has a unused class name that can be utilized in your local CSS to customize the Skeleton at any level.

  1. pando-skeleton: The element of the Skeleton.

2. Passing a className prop

You can pass a className prop to the Skeleton component to customize the Skeleton. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

Example of using CSS Modules to customize the Skeleton.
import customStyles from './customStyles.module.css'

function CustomTextSkeleton(props) {
return (
<Skeleton kind="text" className={customStyles.customSkeleton}>
{props.children}
</Skeleton>
)
}

3. Ejected Skeleton

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Skeleton however you prefer while keeping the accessibility behavior.

import { getSkeletonProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.

Behavior

Layout

Do use a 1px border when creating a container for Skeleton content.

Don't use the Skeleton for a container. Instead, use a border with multiple Skeletons that match the content within the container.

Usage

Do use a Skeleton to represent content of a page that is in the process of loading.

Don't use a Skeleton for static content or as a placeholder for dynamic content.

API

Parameters

interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
kind?: 'content' | 'text' | 'circle'
}
  1. Any props that can be passed to a div element.
  2. kind - determines the style of the Skeleton. The default value is content.

Accessibility

The Pando Skeleton combined with semantic HTML allow the Skeleton to be fully accessible and screen-readable by default.