# Product Loading

Canonical: https://socra.design/composed-components/product-loading

Keep product identity centered while an application initializes.

Give first paint and startup one quiet identity, with recovery available if initialization stalls.

Status: ready. The specimen renders the published ProductLoading export. The viewport presentation runs in its own document; Contained uses the same composition inside the catalog canvas.

Library: @socra/web-ui

## Anatomy

- The canonical product mark stays centered in the application viewport or contained region.
- A named status announces loading without adding a visible message or task.
- An optional native recovery link appears after 15 seconds without moving the mark. The link works before client initialization.

## States

- **Loading:** A restrained opacity pulse signals progress. Reduced motion leaves the mark still.
- **Focus:** The recovery link enters keyboard order only once it becomes visible.
- **Error:** The host replaces loading with its persistent failure and recovery UI when initialization fails.

## Motion

The mark changes opacity without translation or scale. The system reduced-motion preference stops the pulse while keeping the loading status and delayed recovery available.

## Usage

- Use the shared stylesheet from first paint. The server and application must agree on centering and appearance before hydration.
- Keep recovery destinations useful. A native link remains usable when the application has not initialized.

## Avoid


## Tokens


## Example

```tsx
import { ProductLoading } from '@socra/web-ui/product-loading';
import '@socra/web-ui/product-loading.css';

<ProductLoading
  product="account"
  label="Loading Product"
  recoveryHref="/"
  recoveryLabel="Reload Product"
/>
```