# SilkeSkeleton

A loading placeholder component that displays animated skeleton screens while content is loading. Use skeletons to reduce perceived loading time and provide visual feedback that content is being loaded.

## Features

- **Animated shimmer**: Smooth left-to-right shimmer animation
- **Multiple variants**: Single line or multiline paragraph skeletons
- **Customizable**: Apply custom styles and classes
- **Accessible**: Provides visual loading feedback

## Basic Usage

```js
<SilkeSkeleton />
```

## Multiline Skeleton

Use the `multiline` variant for paragraph-style loading placeholders:

```js
<SilkeSkeleton kind="multiline" />
```

## Custom Dimensions

Apply custom width and height via the `style` prop:

```js
<SilkeBox column gap="s">
  <SilkeSkeleton style={{ width: '100%', height: 24 }} />
  <SilkeSkeleton style={{ width: '80%', height: 16 }} />
  <SilkeSkeleton style={{ width: '60%', height: 16 }} />
</SilkeBox>
```

## Card Loading State

Use skeletons to create loading states for cards or complex layouts:

```js
<SilkeBox column gap="m" style={{ width: 300 }}>
  <SilkeSkeleton style={{ width: '100%', height: 150 }} />
  <SilkeBox column gap="xs">
    <SilkeSkeleton style={{ width: '70%', height: 20 }} />
    <SilkeSkeleton kind="multiline" />
  </SilkeBox>
</SilkeBox>
```

## List Loading State

Create loading placeholders for lists:

```js
<SilkeBox column gap="s">
  {[1, 2, 3].map((i) => (
    <SilkeBox key={i} gap="s" vAlign="center">
      <SilkeSkeleton style={{ width: 40, height: 40, borderRadius: '50%' }} />
      <SilkeBox column gap="xs" fill>
        <SilkeSkeleton style={{ width: '60%', height: 14 }} />
        <SilkeSkeleton style={{ width: '40%', height: 12 }} />
      </SilkeBox>
    </SilkeBox>
  ))}
</SilkeBox>
```

## Conditional Loading

Show skeleton while data is loading:

```js
const [loading, setLoading] = React.useState(true);

<SilkeBox column gap="s">
  <SilkeButton label={loading ? 'Stop Loading' : 'Start Loading'} onClick={() => setLoading(!loading)} />
  {loading ? (
    <SilkeBox column gap="xs">
      <SilkeSkeleton style={{ width: '50%', height: 24 }} />
      <SilkeSkeleton kind="multiline" />
    </SilkeBox>
  ) : (
    <SilkeBox column gap="xs">
      <SilkeText kind="title">Content Loaded</SilkeText>
      <SilkeText>This is the actual content that appears after loading.</SilkeText>
    </SilkeBox>
  )}
</SilkeBox>;
```

## Props

| Prop        | Type                                        | Default | Description                          |
| ----------- | ------------------------------------------- | ------- | ------------------------------------ |
| `kind`      | `'multiline' \| 'header' \| 'header-text'`  | -       | Skeleton variant                     |
| `className` | `string`                                    | -       | Additional CSS class names           |
| `style`     | `React.CSSProperties`                       | -       | Inline styles for custom dimensions  |

The component also accepts all standard HTML `div` attributes.

## Animation Details

The skeleton uses a 3-second infinite shimmer animation that:
- Sweeps from left to right
- Fades opacity from 0.3 to 1.0
- Reverses direction and sweeps back
- Creates a smooth loading effect