# SilkeLoader

An animated loading indicator featuring the Vev logo. Use to indicate loading states, async operations, or content that's being fetched.

## Features

- **Animated Vev logo**: Branded loading animation
- **Custom messages**: Display loading text below the animation
- **Random messages**: Generate dynamic loading messages
- **Configurable size**: Scale the loader to fit your context
- **Stoppable animation**: Pause the animation when needed

## Basic Usage

```js
<SilkeLoader />
```

## With Message

Display a static message below the loader:

```js
<SilkeLoader message="Loading your project..." />
```

## Sizes

Control the loader size with the `size` prop:

```js
<SilkeBox gap="xl" vAlign="end">
  <SilkeBox column vAlign="center" gap="xs">
    <SilkeLoader size="s" />
    <SilkeText size="s">size="s"</SilkeText>
  </SilkeBox>
  <SilkeBox column vAlign="center" gap="xs">
    <SilkeLoader size="base" />
    <SilkeText size="s">size="base"</SilkeText>
  </SilkeBox>
  <SilkeBox column vAlign="center" gap="xs">
    <SilkeLoader size="m" />
    <SilkeText size="s">size="m"</SilkeText>
  </SilkeBox>
  <SilkeBox column vAlign="center" gap="xs">
    <SilkeLoader size="l" />
    <SilkeText size="s">size="l"</SilkeText>
  </SilkeBox>
</SilkeBox>
```

## Random Message Generator

Pass a function to display dynamic messages:

```js
const messages = ['Brewing coffee...', 'Fetching pixels...', 'Warming up servers...', 'Almost there...'];
const getRandomMessage = () => messages[Math.floor(Math.random() * messages.length)];

<SilkeLoader randomGenerator={getRandomMessage} />;
```

## Stopped Animation

Pause the animation with the `stop` prop:

```js
const [stopped, setStopped] = React.useState(false);

<SilkeBox column gap="m" vAlign="center">
  <SilkeLoader size="m" stop={stopped} message={stopped ? 'Paused' : 'Loading...'} />
  <SilkeButton label={stopped ? 'Resume' : 'Pause'} onClick={() => setStopped(!stopped)} />
</SilkeBox>;
```

## In a Loading State

Use within conditional rendering:

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

<SilkeBox column gap="m">
  <SilkeButton label={loading ? 'Stop Loading' : 'Start Loading'} onClick={() => setLoading(!loading)} />
  {loading ? (
    <SilkeBox pad="xl" vAlign="center" hAlign="center" bg="neutral-10" rounded>
      <SilkeLoader size="m" message="Fetching data..." />
    </SilkeBox>
  ) : (
    <SilkeBox pad="xl" vAlign="center" hAlign="center" bg="success-10" rounded>
      <SilkeText>Content loaded!</SilkeText>
    </SilkeBox>
  )}
</SilkeBox>;
```

## Full Page Loader

Center the loader for full-page loading states:

```js
<SilkeBox style={{ height: 200 }} vAlign="center" hAlign="center" bg="neutral-5" rounded>
  <SilkeLoader size="l" message="Loading application..." />
</SilkeBox>
```

## Custom Styling

Apply custom styles to the loader:

```js
<SilkeBox gap="l">
  <SilkeLoader size="m" style={{ opacity: 0.5 }} />
  <SilkeLoader size="m" style={{ filter: 'hue-rotate(180deg)' }} />
</SilkeBox>
```

## Props

| Prop              | Type                | Default | Description                              |
| ----------------- | ------------------- | ------- | ---------------------------------------- |
| `message`         | `string`            | -       | Static message to display below loader   |
| `randomGenerator` | `() => string`      | -       | Function that returns dynamic messages   |
| `size`            | `BoxSize`           | -       | Size of the loader (xs, s, base, m, l, xl) |
| `stop`            | `boolean`           | `false` | Pause the animation                      |
| `style`           | `React.CSSProperties` | -     | Custom styles for the SVG                |

Also accepts all `SilkeBox` props for layout control.

## LoaderSVG

The raw SVG component is also exported for custom implementations:

```js
<LoaderSVG />
```

### LoaderSVG Props

| Prop    | Type                  | Default | Description           |
| ------- | --------------------- | ------- | --------------------- |
| `stop`  | `boolean`             | `false` | Pause the animation   |
| `style` | `React.CSSProperties` | -       | Custom styles         |