Skeleton loader

Static placeholder layout for loading states

Demo

API

Tag

Name	Description
`<s-skeleton-loader>`	Custom HTML tag, no content

Attributes

Name	Value	Required	Description
`loading`	Boolean attribute		When present, the skeleton loader is rendered. When absent, nothing is rendered.
`type`	String	Yes	Selects the skeleton layout variant. Supported values: `detail-page`, `home-page`, `table`.

Properties

Name	Value	Required	Description
`loading`	boolean		When `true`, renders the selected skeleton layout.
`type`	string	Yes	Layout identifier. Unknown values render nothing.

Demo

API

Tag

Name
`<SSkeletonLoader>`

Props

Name	Value	Required	Description
`loading`	boolean		When `true`, renders the selected skeleton layout.
`type`	string	Yes	Layout identifier. Supported values: `detail-page`, `home-page`, `table`.

Skylab React links

General information about using our React package

Guidelines

Usage

Use type="detail-page" for the detail page placeholder layout. Keep the loader in a container with an explicit height so the large content block can fill the remaining space.

Use type="home-page" for the two-column tile layout. Give the host a larger container height so all six tile placeholders can render without clipping.

Use type="table" for tabular loading states. It renders immediately (without staggered entry) and responsively reduces visible columns at smaller breakpoints while keeping the same shimmer behavior.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com