Skeleton
Shape-preserving placeholders with shimmer, pulse, or static states.
Implementation
1import type { CSSProperties } from "react";2 3export type SkeletonProps = {4 width?: number | string;5 height?: number | string;6 shape?: "line" | "circle" | "rounded";7 animation?: "shimmer" | "pulse" | "none";8 className?: string;9};10 11/** Decorative placeholder. Put a loading status on the containing region. */12export function Skeleton({13 width = "100%",14 height = 12,15 shape = "line",16 animation = "shimmer",17 className = "",18}: SkeletonProps) {19 return (20 <span21 className={`gamma-skeleton gamma-skeleton-${shape} gamma-skeleton-${animation} ${className}`}22 style={{ width, height } satisfies CSSProperties}23 aria-hidden="true"24 />25 );26}