Skeleton

Used to display a loading state for page content.

• View on Github
• View Core API
• View on Figma

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

function TextSkeletonExamples() { return ( <div> <Skeleton kind="text" /> <Skeleton kind="text" /> <Skeleton kind="text" /> </div> ) }

function TextSkeletonExamples() {
  return (
    <div>
      <Skeleton kind="text" />
      <Skeleton kind="text" />
      <Skeleton kind="text" />
    </div>
  )
}

Content Block Skeleton

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

Result

Loading...

Live Editor

function ContentSkeletonExample() { return ( <Skeleton kind="content"> <h2 data-site-override="hidden">Some Title</h2> <p>A description of the content.</p> </Skeleton> ) }

function ContentSkeletonExample() {
  return (
    <Skeleton kind="content">
      <h2 data-site-override="hidden">Some Title</h2>
      <p>A description of the content.</p>
    </Skeleton>
  )
}

Circular Skeleton

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

Result

Loading...

Live Editor

function CircleSkeletonExample() { return <Skeleton kind="circle" /> }

function CircleSkeletonExample() {
  return <Skeleton kind="circle" />
}

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

function ProfileCardFallback() { return ( <div style={{ border: '1px solid var(--ps-border-weak)', borderRadius: '6px', padding: '1rem', textAlign: 'center', width: '33%', }} > <div style={{ paddingBottom: '1rem' }}> <Skeleton kind="circle" style={{ height: '5rem', margin: '0 auto', width: '5rem' }} /> </div> <Skeleton kind="content" style={{ margin: '0 auto', }} > <h3 data-site-override="hidden">That Person</h3> </Skeleton> <Skeleton kind="text" style={{ margin: '0 auto', width: '8rem' }} /> </div> ) }

function ProfileCardFallback() {
  return (
    <div
      style={{
        border: '1px solid var(--ps-border-weak)',
        borderRadius: '6px',
        padding: '1rem',
        textAlign: 'center',
        width: '33%',
      }}
    >
      <div style={{ paddingBottom: '1rem' }}>
        <Skeleton
          kind="circle"
          style={{ height: '5rem', margin: '0 auto', width: '5rem' }}
        />
      </div>
      <Skeleton
        kind="content"
        style={{
          margin: '0 auto',
        }}
      >
        <h3 data-site-override="hidden">That Person</h3>
      </Skeleton>
      <Skeleton kind="text" style={{ margin: '0 auto', width: '8rem' }} />
    </div>
  )
}

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.