Skeleton
This feature improves the store's experience and perceived performance through loading placeholders.
Skeletons are like an element's or section's wireframe. It's a placeholder
that simulates the layout of these elements/sections while data is being loaded.
Instead of showing a blank page, displaying Skeletons while loading content makes the user feel like the store is more responsive and faster.
Also by using Skeletons the store will be less likely to experience Cumulative Layout Shilf (or CLS) (opens in a new tab).
Overview
Import
Import the component from @faststore/ui
import { Skeleton } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/atoms/Skeleton/styles.scss'Usage
<Skeleton size={{ width: '200px', height: '80px' }} borderRadius="32px" />Props
| Name | Type | Description | Default |
|---|---|---|---|
| Coming Soon |
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) |
Nested Elements
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 |
Customization
For further customization, you can use the following data attributes:
data-fs-skeleton
data-fs-skeleton-shimmer