Skeleton

Skeleton is a placeholder that simulates the layout of these elements/sections while the data is being loaded.

This feature improves the store's experience and perceived performance through loading placeholders. skeletons are like an element's or section's wireframe. They're placeholders that simulate the layout of these elements or sections while data loads.

Instead of showing a blank page, displaying skeletons while loading content makes users feel that the store is more responsive and faster.

Additionally, by using skeletons, the store will be less likely to experience Cumulative Layout Shift (CLS).

Example

Code

Usage

Import the component


_10import { Skeleton } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";

For details, see Importing FastStore UI component styles.

Examples

Border

Regular

Example

Code

Pill

Example

Code

Circle

Example

Code

Without shimmer effect

Example

Code

Design tokens

Local token	Default value/Global token linked
`--fs-skeleton-bkg-color`	`var(--fs-color-disabled-bkg)`
`--fs-skeleton-border-radius`	`var(--fs-border-radius)`

Design tokens: Shimmer

Local token	Default value/Global token linked
`--fs-skeleton-shimmer-width`	`50%`
`--fs-skeleton-shimmer-height`	`100%`
`--fs-skeleton-shimmer-bkg-color`	`rgb(255 255 255 / 20%)`
`--fs-skeleton-shimmer-box-shadow`	`0 0 var(--fs-spacing-5) var(--fs-spacing-5) var(--fs-skeleton-shimmer-bkg-color)`

`--fs-skeleton-shimmer-transition-timing`	`850ms`
`--fs-skeleton-shimmer-transition-function`	`linear`
`--fs-skeleton-shimmer-transition-iteration`	`infinite`

Data attributes

You can target and override Skeleton styles using the following data attributes:

data-fs-skeleton

data-fs-skeleton-shimmer

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-skeleton`
loading	`false \| true`	Control whether skeleton should be visible or not.	`true`
shimmer	`false \| true`	Control whether the shimmer effect should be displayed or not.	`true`
size*	`Size`	Specifies the skeleton element size (width, height).
border	`"regular" \| "pill" \| "circle"`	Specifies the skeleton element border radius ('regular' \| 'pill' \| 'circle').
borderRadius	`string`	Custom border radius for skeleton elements.