# Skeleton

> A placeholder block that pulses (`t-skel-pulse`, 1s) in `accent` while content loads.

## Facts

- **Product**: Max
- **Family**: Feedback
- **Global**: `window.DigitalCrew.Skeleton`
- **Source**: `max-agent: src/components/ui/skeleton.tsx`
- **Import in the app**: `import { Skeleton } from "@/components/ui/skeleton";`
- **Live preview**: /design/components/skeleton/preview.html
- **Page**: /design/components/skeleton

## Guidelines

**Use it for** every load longer than a blink — Max has about 400 of them, and route-level `loading.tsx` screens should reuse them. Shape skeletons like the content (avatar circle, two text lines, KPI tiles via `KpiCardSkeleton`) so nothing jumps when it arrives.

**What you provide**: size and shape through `className` (`h-4 w-56`, `size-11 rounded-full`). Keep loading, empty, no-access and failed states distinct: never show "nothing here" while access is still being checked.

## API

```ts
declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): JSX.Element;
export { Skeleton };
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "grid gap-6 max-w-xl" },
    h("div", { className: "flex items-center gap-4" },
      h(DC.Skeleton, { className: "size-11 rounded-full" }),
      h("div", { className: "grid gap-2" }, h(DC.Skeleton, { className: "h-4 w-56" }), h(DC.Skeleton, { className: "h-4 w-40" }))),
    h("div", { className: "grid grid-cols-3 gap-3" },
      h(DC.KpiCardSkeleton, null), h(DC.KpiCardSkeleton, null), h(DC.KpiCardSkeleton, null)));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Feedback

- [Alert](/design/components/alert.md): An inline, non-dismissable notice (`role="alert"`) with an optional icon, a one-line title and a description.
- [AnimatedCircularProgressBar](/design/components/animated-circular-progress-bar.md): A circular gauge for a value against a quota, with the number in the middle.
- [HelpTooltip](/design/components/help-tooltip.md): A 16px `HelpCircle` in `muted-foreground` that shows an explanation on hover or focus.
- [Progress](/design/components/progress.md): A determinate bar: `primary` fill on `primary` at 20%, 8px tall, `r-full`.
- [Toaster](/design/components/toaster.md): Toast notifications (Sonner) on the `popover` surface with a `border` and `radius-lg`; mount one `Toaster` at the root and call `toast()` from anywhere.