# Skeleton

Use Skeleton to show low-contrast placeholders while content is loading.

The component mirrors shadcn/ui's Skeleton primitive: it supplies the pulsing muted surface, while dimensions, shape, and layout are provided by utility classes at the call site.

## Import

```ts
import { SkeletonComponent } from '@edsis/component/skeleton';
```

## Usage

Give each skeleton an explicit width, height, and optional radius. Without dimensions, the element exists in the DOM but will not create a visible placeholder.

```html
<Skeleton class="h-5 w-25 rounded-full" />
```

```html
<div class="flex items-center gap-4">
  <Skeleton class="h-12 w-12 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-62.5" />
    <Skeleton class="h-4 w-50" />
  </div>
</div>
```

## Common patterns

### Avatar

Use a round placeholder and two lines when loading profile identity, assignee, or author metadata.

```html
<div class="flex w-fit items-center gap-4">
  <Skeleton class="size-10 shrink-0 rounded-full" />
  <div class="grid gap-2">
    <Skeleton class="h-4 w-37.5" />
    <Skeleton class="h-4 w-25" />
  </div>
</div>
```

### Card

Skeleton composes inside `Card` parts. Match the final loaded geometry to avoid layout shift.

```html
<Card class="w-full max-w-xs">
  <CardHeader>
    <div class="col-span-2 grid gap-2">
      <Skeleton class="h-4 w-2/3" />
      <Skeleton class="h-4 w-1/2" />
    </div>
  </CardHeader>
  <CardContent>
    <Skeleton class="aspect-video w-full" />
  </CardContent>
</Card>
```

### Text

Use repeated bars and shorten the final line for paragraph rhythm.

```html
<div class="flex w-full max-w-xs flex-col gap-2">
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-3/4" />
</div>
```

### Form

Pair short label placeholders with wider control placeholders when loading form metadata.

```html
<div class="flex w-full max-w-xs flex-col gap-7">
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-20" />
    <Skeleton class="h-8 w-full" />
  </div>
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-8 w-full" />
  </div>
  <Skeleton class="h-8 w-24" />
</div>
```

### Table

Repeat rows with matching column proportions so tabular data keeps a stable footprint while loading.

```html
<div class="flex w-full max-w-sm flex-col gap-2">
  @for (row of tableRows; track row) {
  <div class="flex gap-4">
    <Skeleton class="h-4 flex-1" />
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-4 w-20" />
  </div>
  }
</div>
```

### RTL

Skeleton is direction-agnostic. Put `dir="rtl"` on the wrapper when the placeholder should reserve right-to-left layout space.

```html
<div dir="rtl" lang="ar" class="flex items-center gap-4">
  <Skeleton class="h-12 w-12 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-62.5" />
    <Skeleton class="h-4 w-50" />
  </div>
</div>
```

## API reference

### `SkeletonComponent`

| Input   | Type     | Default | Description                                           |
| ------- | -------- | ------- | ----------------------------------------------------- |
| `class` | `string` | `''`    | Supplies visible dimensions, shape, and extra layout. |

## Styling and theming

Base classes: `block animate-pulse rounded-md bg-muted`.

The component consumes the shared muted theme token through `bg-muted`. Pass utility classes for width, height, radius, flex behavior, margins, and responsive variants. Because the host is block-level, width and height utilities behave like they do on the shadcn React `<div>` implementation.

## Accessibility

`Skeleton` emits `aria-hidden="true"` because it is decorative loading chrome. Pair it with status text, a live region, or a busy state on the loaded region when the loading state needs to be announced.

Avoid replacing labels or meaningful headings with only skeletons for long periods. Keep the eventual content area stable and announce changes when data arrives.

## Keyboard interactions

Skeleton has no keyboard interaction. It should not receive focus and should not contain interactive content.

## Angular notes

- Import `SkeletonComponent` directly into the standalone component that renders the loading state.
- The `class` input is intentionally the main API so Angular examples stay close to shadcn utility-class composition.
- Use Angular control flow for repeated rows: `@for (row of tableRows; track row) { ... }`.
- Keep placeholder dimensions close to the loaded content to reduce layout shift.

## Source parity

This Angular implementation follows the shadcn Skeleton docs and examples for preview, usage, Avatar, Card, Text, Form, Table, and RTL. React `className` becomes Angular `class`, and the primitive renders as a block-level custom element so sizing utilities match the upstream `<div>` behavior.