ComponentProduct

Skeleton

Loading placeholder with a shimmer animation.

$ npx context-ds add skeleton

In the product

Usage

Use it for

Loading placeholders shaped like the content.

Avoid

Spinners where the layout is known

Example

examples/skeleton.tsx

import { Skeleton } from "@/components/ui/skeleton";export function Product() {  return (    <div className="grid w-full max-w-sm gap-3">      <Skeleton className="h-5 w-1/3" />      <Skeleton className="h-24 w-full rounded-card" />      <Skeleton className="h-4 w-2/3" />    </div>  );}

Source

components/ui/skeleton.tsx

import * as React from "react";import { cn } from "@/lib/utils";// The dashboard's skeleton: a pale block with a sheen sliding across it on transform (constant motion, so linear); with// reduced motion, the block alone.function Skeleton({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      aria-hidden      data-slot="skeleton"      className={cn(        "relative overflow-hidden rounded-[calc(var(--ds-radius-control)-0.125rem)] bg-neutral-5 after:absolute after:inset-0 after:animate-shimmer after:bg-linear-to-r after:from-transparent after:via-skeleton-shine after:to-transparent after:[animation-duration:1.4s] after:[animation-timing-function:linear] motion-reduce:after:hidden",        className,      )}      {...props}    />  );}export { Skeleton };

Reference: context-dashboard c0ddf7a src/components/ui/skeleton.tsx.