Loaders

# Brok UI: Scan Loader (`scan-loader`)

An analyzing-image loader — a muted placeholder box with corner brackets and a bright beam sweeping top↔bottom, reading as "analyzing".

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

## Install

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

## Usage

```blade
<div class="flex flex-wrap items-end gap-8">
    <div class="flex flex-col items-center gap-2">
        <x-ui.scan-loader size="sm" />
        <span class="text-xs text-muted-foreground">sm</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <x-ui.scan-loader size="md" />
        <span class="text-xs text-muted-foreground">md</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <x-ui.scan-loader size="lg" />
        <span class="text-xs text-muted-foreground">lg</span>
    </div>
</div>
```

## Props

- `label` (string, default `Analyzing`) — Accessible status label announced to screen readers.
- `size` (md|sm|lg, default `md`) — Overall frame size: sm, md, or lg.
- `variant` (string, default `default`) — Reserved for future looks; any value currently renders the same default look.

## Use when

- Use while content or system work is in progress so users understand the interface is responding.
- Indicating a background analysis or processing step, such as scanning an uploaded image or document.
- Wanting a bracket-framed sweeping-beam look distinct from a generic spinner.

## Avoid when

- Do not use indefinite loading indicators when you can show structure, progress, or a next step instead.
- Indicating a generic busy state with no analysis metaphor; use spinner or dots-loader 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:scan-loader>` tag (or `<x-ui.scan-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/scan-loader
- Registry JSON (files, props, contract): https://brokui.dev/r/open/scan-loader.json

@props([
    'label' => 'Analyzing',
    'size' => 'md',
    'variant' => 'default',
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    // Fixed box-size classes per size — never splice variables into arbitrary
    // classes (Tailwind JIT can't see them). Each entry is a literal class string.
    $sizes = [
        'sm' => 'size-16',
        'md' => 'size-24',
        'lg' => 'size-32',
    ];
    $boxSize = $sizes[$size] ?? $sizes['md'];

    // Single look. `variant` is kept for the stable data-variant contract.
    $variant = 'default';

    // Shared corner-bracket sizing — brackets use border-current so they pick up
    // the muted-foreground text colour from the root (token-only, themes for free).
    $bracket = 'pointer-events-none absolute z-10 size-3 border-current opacity-70 ui-scanloader-bracket';
@endphp

{{--
    Scan loader — a muted placeholder box framed by four L-shaped corner brackets
    with a bright scan beam sweeping top↔bottom, reading as "analyzing an image".
    Faithful to loading-ui.com. The beam gradient + sweep motion are defined in
    ui.css keyed on [data-slot="scan-loader"] (namespaced ui-scanloader-*) and
    gated for reduced-motion, so the markup stays token-clean for the raw-colour
    guard. Decorative parts are aria-hidden; an sr-only label announces status.
--}}
<div
    data-slot="scan-loader"
    data-variant="{{ $variant }}"
    data-size="{{ $size }}"
    role="status"
    aria-label="{{ __($label) }}"
    {{ $attributes->merge(['class' => "relative inline-block overflow-hidden rounded-lg bg-muted text-muted-foreground $boxSize"]) }}
>
    {{-- Corner brackets (L-shaped) --}}
    <span class="{{ $bracket }} start-1 top-1 border-s-2 border-t-2 rounded-ss-sm" aria-hidden="true"></span>
    <span class="{{ $bracket }} end-1 top-1 border-e-2 border-t-2 rounded-se-sm" aria-hidden="true"></span>
    <span class="{{ $bracket }} start-1 bottom-1 border-s-2 border-b-2 rounded-es-sm" aria-hidden="true"></span>
    <span class="{{ $bracket }} end-1 bottom-1 border-e-2 border-b-2 rounded-ee-sm" aria-hidden="true"></span>

    {{-- Scan beam: sweeps top↔bottom inside the bracket frame (inset 0.5rem);
         line, trail and motion live in ui.css. --}}
    <span data-slot="scan-loader-frame" class="pointer-events-none absolute inset-2 overflow-hidden rounded-sm" aria-hidden="true">
        <span class="ui-scanloader-beam absolute inset-x-0 top-0"></span>
    </span>

    <span class="sr-only">{{ __($label) }}</span>
</div>