Loaders

# Brok UI: Shape Loader (`shape-loader`)

Shape-based loading indicator faithful to loading-ui.com — infinity, morph, diamond and track variants drawn with animated SVG strokes.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add shape-loader
```

## Usage

```blade
<div class="flex flex-wrap items-end gap-10">
    <div class="flex flex-col items-center gap-2">
        <x-ui.shape-loader variant="infinity" label="infinity" />
        <span class="text-xs text-muted-foreground">infinity</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <x-ui.shape-loader variant="morph" label="morph" />
        <span class="text-xs text-muted-foreground">morph</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <x-ui.shape-loader variant="diamond" label="diamond" />
        <span class="text-xs text-muted-foreground">diamond</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <x-ui.shape-loader variant="track" label="track" />
        <span class="text-xs text-muted-foreground">track</span>
    </div>
</div>
```

## Props

- `variant` (infinity|morph|diamond|track, default `infinity`) — Motion pattern: infinity, morph, diamond, or track.
- `size` (md|sm|lg, default `md`) — Overall SVG height: sm, md, or lg (width scales to fit).
- `label` (string, default `Loading`) — Accessible status label announced to screen readers.

## Use when

- Use while content or system work is in progress so users understand the interface is responding.
- Indicating an in-progress background action with an animated SVG stroke shape.
- Wanting a choice of four shape motions (infinity, morph, diamond, track) to match a loading-ui.com aesthetic.

## Avoid when

- Do not use indefinite loading indicators when you can show structure, progress, or a next step instead.
- Needing a generic circular spinner; use spinner instead.
- Loading a full page or section; pair with skeleton for layout-shaped placeholders instead.

## Anti-patterns

- Indefinite loading with no progress or recovery

## Rules

- Use the `<brok:shape-loader>` tag (or `<x-ui.shape-loader>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/shape-loader
- Registry JSON (files, props, contract): https://brokui.dev/r/open/shape-loader.json

@props([
    'variant' => 'infinity',
    'size' => 'md',
    'label' => 'Loading',
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    // Faithful to loading-ui.com infinity / diamond / track loaders. `infinity` and
    // `morph` draw an ∞ outline with an animated stroke dash; `track` runs a bead
    // along the same ∞ path; `diamond` rotates + pulses a diamond outline. All motion
    // lives in ui.css keyed on [data-slot="shape-loader"][data-variant="…"]
    // (reduced-motion gated, token-only colours). Never splice a value into an
    // arbitrary class.
    $variants = ['infinity', 'morph', 'diamond', 'track'];
    $variant = in_array($variant, $variants, true) ? $variant : 'infinity';

    // Per-size box. Fixed classes only — the SVG scales to fit, width auto.
    $sizes = [
        'sm' => 'h-6 w-auto',
        'md' => 'h-9 w-auto',
        'lg' => 'h-12 w-auto',
    ];
    $box = $sizes[$size] ?? $sizes['md'];

    // Single ∞ path reused by infinity / morph / track. viewBox keeps stroke crisp.
    $infinityPath = 'M20 30 C20 18, 38 18, 50 30 C62 42, 80 42, 80 30 C80 18, 62 18, 50 30 C38 42, 20 42, 20 30 Z';
@endphp

<span
    data-slot="shape-loader"
    data-variant="{{ $variant }}"
    data-size="{{ $size }}"
    role="status"
    aria-label="{{ __($label) }}"
    {{ $attributes->merge(['class' => 'inline-flex items-center justify-center text-muted-foreground']) }}
>
    @if ($variant === 'diamond')
        <svg class="{{ $box }} ui-shapeloader-diamond" viewBox="0 0 100 100" fill="none" stroke="currentColor" aria-hidden="true">
            <rect x="28" y="28" width="44" height="44" rx="4" stroke-width="6" vector-effect="non-scaling-stroke" />
        </svg>
    @elseif ($variant === 'track')
        <svg class="{{ $box }}" viewBox="0 0 100 60" fill="none" stroke="currentColor" aria-hidden="true">
            <path d="{{ $infinityPath }}" class="ui-shapeloader-track-rail" stroke-width="6" vector-effect="non-scaling-stroke" />
            <path d="{{ $infinityPath }}" class="ui-shapeloader-track-bead" stroke-width="9" stroke-linecap="round" vector-effect="non-scaling-stroke" />
        </svg>
    @else
        <svg class="{{ $box }}" viewBox="0 0 100 60" fill="none" stroke="currentColor" aria-hidden="true">
            @if ($variant === 'morph')
                <path d="{{ $infinityPath }}" class="ui-shapeloader-morph-base" stroke-width="6" vector-effect="non-scaling-stroke" />
            @endif
            <path d="{{ $infinityPath }}" class="ui-shapeloader-infinity-dash" stroke-width="6" stroke-linecap="round" vector-effect="non-scaling-stroke" />
        </svg>
    @endif
    <span class="sr-only">{{ __($label) }}</span>
</span>