Skeleton

• Location: sabo/src/components/ui/skeleton.tsx

​

When to use

• Reserve vertical space and reduce layout shift while waiting for data.
• Prefer Spinner for small inline tasks; Skeleton for structured blocks.

​

Usage

import { Skeleton } from "@/components/ui/skeleton";

export function Example() {
  return (
    <div className="w-64 space-y-2">
      <Skeleton className="h-5 w-40" />
      <Skeleton className="h-3 w-64" />
      <Skeleton className="h-3 w-56" />
    </div>
  );
}

​

Key props

​

Styling tip

• Keep colors subtle. Avoid using Skeleton for long periods—swap to content as soon as possible.

​

Accessibility

• Skeletons are decorative; ensure a live region or status conveys overall loading state elsewhere.