Skeleton
Used to display a loading state for page content.
Import
import { Skeleton } from '@pluralsight/react'
Anatomy
- Container
- Content (optional)
- Text (optional)
Usage
Text Skeleton
Used to represent where lines of text may appear within your page.
Content Block Skeleton
Used to represent where a block of content may appear within your page.
Circular Skeleton
Used to represent where circular shaped content may appear within your page.
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.
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.
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'
}
- Any props that can be passed to a
div
element. kind
- determines the style of the Skeleton. The default value iscontent
.
Accessibility
The Pando Skeleton combined with semantic HTML allow the Skeleton to be fully accessible and screen-readable by default.