<!-- source-hash: da03f70685b81a05475fa7db2ce0079d -->
A full-screen loading component that displays an animated heartbeat logo with progress tracking, designed for long-running background operations like report generation.

## Key Components

### `OpenmspHeartbeatLoader`

A React client component that renders a centered loading screen with:

- **Heartbeat animation** — inline `@keyframes` CSS (`heartbeatInline`) simulating a lub-dub double-beat pulse on the OpenMSP logo, avoiding Tailwind purge issues
- **`OpenmspLogo`** — branded logo with customized bubble colors, scaled responsively (`w-16`/`h-16` → `w-24`/`h-24`)
- **Progress indicator** — displays integer percentage (0–100) with secondary `/100%` label
- **Status label** — configurable message defaulting to `"Processing…"`
- **User reassurance message** — informs users they can navigate away safely

### Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `className` | `string` | `''` | Additional CSS classes for the outer container |
| `progress` | `number` | `0` | Completion percentage (0–100) |
| `label` | `string` | `"Processing…"` | Status message shown below progress |
| `barWidth` | `string` | `'w-128'` | Tailwind width class for the content column |

## Usage Example

```typescript
import { OpenmspHeartbeatLoader } from './openmsp-heartbeat';

export default function ReportPage() {
  const [progress, setProgress] = React.useState(42);

  return (
    <OpenmspHeartbeatLoader
      progress={progress}
      label="Generating your MSP report…"
      barWidth="w-96"
    />
  );
}
```

## Source

[`openmsp-heartbeat.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/openmsp-heartbeat.tsx)