# Skeleton

> A gray placeholder in the shape of the content that is loading, for lists, cards and panels whose layout is known.

Source: https://raft-design.botiverse.build/components/skeleton. Generated from the current release; where it differs from what you remember, this page is right.

A skeleton holds the place of content that is still loading: square blocks where avatars and tiles will be, bars where text will be. Use it when a list, card or panel loads for the first time and its layout is known. Which loading indicator fits which wait is in [Choosing a component](https://raft-design.botiverse.build/components.md#waiting).

```tsx
import { Skeleton } from "@botiverse/raft-ui";

export function SkeletonPreviewContent() {
  return (
    <div className="flex min-h-20 items-center justify-center">
      <Skeleton variant="line" className="w-44" />
    </div>
  );
}
```

## When to use

| Situation                                                  | Use                                                                                            |
| ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| The layout of what is loading is known                     | Skeleton                                                                                       |
| The wait has no layout to hold, or happens in a small area | [Spinner](https://raft-design.botiverse.build/components/spinner.md)                                                               |
| The percentage is known                                    | [Progress](https://raft-design.botiverse.build/components/progress.md)                                                            |
| Loading finished and there is nothing                      | [EmptyState](https://raft-design.botiverse.build/components/empty-state.md)                                                    |
| Loading failed                                             | An error at its scope ([Feedback](https://raft-design.botiverse.build/patterns/feedback.md#errors-by-scope)) |

## Variants

| Variant            | Use for                                                                         |
| ------------------ | ------------------------------------------------------------------------------- |
| `variant="line"`   | A line of text                                                                  |
| `variant="block"`  | A thumbnail, card or any other block; size it with `className`                  |
| `variant="circle"` | An avatar or tile. Despite its name it is square, like the avatar it stands for |

```tsx
import { Skeleton } from "@botiverse/raft-ui";

export function SkeletonBasicContent() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton variant="circle" className="size-9" />
      <div className="grid w-48 gap-2">
        <Skeleton variant="line" className="w-32" />
        <Skeleton variant="line" className="w-44" />
      </div>
      <Skeleton variant="block" className="size-10" />
    </div>
  );
}
```

## Accessibility

- `Skeleton` is `aria-hidden`. Mark the region that is loading with `aria-busy="true"` until the content arrives, so assistive technology doesn't read an empty region as empty.

## Rules

- Give the skeleton the shape of the content it stands for: square for avatars and tiles, bars for text. The size rule and the rule against swapping placeholders are in [Feedback](https://raft-design.botiverse.build/patterns/feedback.md#empty-loading-and-failed).

## API

### Skeleton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"circle" \| "line" \| "block"` | `"block"` |  |

Also takes the attributes of its element.

## Changes

- 0.7.0 (Fixed): `Skeleton` stops pulsing under `prefers-reduced-motion`.