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.

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.

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.

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.

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>
  )
}

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.

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.