# Loader

## Visual Structure

### Block Loader

```
ga-loader [--small|--medium|--large]
  ├── ga-loader__icon ga-loader__icon--animated
  ├── ga-loader__icon ga-loader__icon--reduced-motion
  └── ga-loader__label (optional, hidden when empty)
```

### Inline Loader

```
ga-inline-loading [--active|--completed|--error|--inactive]
  ├── ga-inline-loading__icon (optional, displayed based on state)
  └── text content
```

## Elements Hierarchy

### Core Block

- `ga-loader` - Main container for the loader component. Can be combined with a size modifier.

### Child Elements

- `ga-loader__icon` - The loading icon. Icon size is controlled by CSS based on the size modifier.
- `ga-loader__icon--animated` - Animated spinner shown by default. Use the loader SVG from `@vsn-ux/gaia-styles/images/loader.svg`.
- `ga-loader__icon--reduced-motion` - Non-animated `HourglassIcon` from `lucide-react`, shown when `prefers-reduced-motion: reduce` is active.
- `ga-loader__label` - Text displayed below the loader to provide context (optional, automatically hidden when empty)

### Size Modifiers

- `ga-loader--small` - Small size loader
- `ga-loader--medium` - Medium size loader, default
- `ga-loader--large` - Large size loader

## Inline Loading

### Core Block

- `ga-inline-loading` - Main container for inline loading component. Must be combined with a state modifier.

### State Modifier Classes (on ga-inline-loading)

- `ga-inline-loading--active` - Active loading state with animated spinner icon
- `ga-inline-loading--completed` - Completed state with green CircleCheck icon
- `ga-inline-loading--error` - Error state with red OctagonAlert icon
- `ga-inline-loading--inactive` - Inactive state with disabled text color

### Child Elements

- `ga-inline-loading__icon` - The inline loading icon
- Text content - Inline text next to the icon

## Examples

### Default

### Small

### Large

### Without Label

## Inline Loading Examples

### Inline Loading Active

### Inline Loading Completed

### Inline Loading Error

### Inline Loading Inactive