Skeleton
Use to indicate a loading state of a component or page. Automatically optimized for reduced motion and screen readers.
Skeletons provide a visual cue that content is loading, preventing layout shifts and improving the perceived performance.
Accessibility Features
- ARIA Live: Should be used inside a
LiveRegionor container witharia-busy="true". - Reduced Motion: Animations are automatically disabled if the user has requested reduced motion.
Usage Example
import { Skeleton } from '@holmdigital/components'; function ProductCard() { return ( <div className="flex flex-col gap-4"> <Skeleton className="h-[125px] w-[250px] rounded-xl" /> <div className="space-y-2"> <Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[200px]" /> </div> </div> ); }