Skeleton
Skeleton displays a loading placeholder that mimics the shape of content while data is being fetched, improving perceived performance and reducing layout shifts.
Skeletons are visual placeholders that simulate the layout of content while data is loading. By displaying skeletons instead of blank spaces, you provide users with immediate visual feedback, making your store feel faster and more responsive.
Skeletons also help prevent Cumulative Layout Shift (CLS) by reserving space for content before it loads, ensuring a smooth user experience during data fetching operations.
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
Custom border radius
Example
Code
Shimmer effect
With shimmer (default)
Example
Code
Without shimmer effect
Example
Code
Loading state control
_23import React from 'react'_23import { Skeleton } from '@faststore/ui'_23_23export default function SkeletonExample() {_23 const isLoading = true_23_23 return (_23 <div>_23 {isLoading ? (_23 // Loading state_23 <Skeleton_23 style={{ width: '150px', height: '100px' }}_23 border="regular"_23 />_23 ) : (_23 // Content loaded_23 <div style={{ padding: '20px', background: '#f0f0f0', borderRadius: '8px' }}>_23 Content loaded_23 </div>_23 )}_23 </div>_23 )_23}
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-skeletondata-fs-skeleton-shimmerProps
| 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. |
Best practices
- Use Skeletons for elements that load asynchronously, such as product cards, images, or sections.
- Match the Skeleton’s shape and size to the content it represents for a seamless transition.
- Avoid using Skeletons for static or instantly available content.
- Disable shimmer animation (
shimmer={false}) for a more subtle loading effect, especially in contexts where animation might be distracting.