Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development

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


_10
import { 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";


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


_23
import React from 'react'
_23
import { Skeleton } from '@faststore/ui'
_23
_23
export 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 tokenDefault value/Global token linked
--fs-skeleton-bkg-color
var(--fs-color-disabled-bkg)
--fs-skeleton-border-radiusvar(--fs-border-radius)

Design tokens: Shimmer

Local tokenDefault value/Global token linked
--fs-skeleton-shimmer-width50%
--fs-skeleton-shimmer-height100%
--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-timing850ms
--fs-skeleton-shimmer-transition-functionlinear
--fs-skeleton-shimmer-transition-iterationinfinite

Data attributes

You can target and override Skeleton styles using the following data attributes:
data-fs-skeleton
data-fs-skeleton-shimmer

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-skeleton
loadingfalse | trueControl whether skeleton should be visible or not.true
shimmerfalse | trueControl whether the shimmer effect should be displayed or not.true
size*SizeSpecifies the skeleton element size (width, height).
border"regular" | "pill" | "circle"Specifies the skeleton element border radius ('regular' | 'pill' | 'circle').
borderRadiusstringCustom 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.

Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Suggest edits (GitHub)
On this page