<!-- source-hash: c9249823535d22722e2d0a1620a2ff31 -->
Loading placeholder that mirrors the layout of `MspOrganizationCard` — preserving dimensions during data fetch to prevent layout shift on the welcome screen.

## Key Components

### `MspOrganizationCardSkeleton`

A shimmer placeholder component that replicates the visual structure of `MspOrganizationCard` with three skeleton blocks:

- **Logo placeholder** — 48×48px square (left)
- **Text placeholders** — title line (60% width) and website line (40% width) stacked vertically
- **Action button placeholder** — 48×48px square (right)

### `MspOrganizationCardSkeletonProps`

| Prop | Type | Description |
|---|---|---|
| `className` | `string` (optional) | Appended to the root element for layout overrides |

## Usage Example

```typescript
import { MspOrganizationCardSkeleton } from './msp-organization-card-skeleton'

// Show while tenant data is loading
function WelcomeScreen() {
  const { data, isLoading } = useTenantInfo()

  if (isLoading) {
    return <MspOrganizationCardSkeleton />
  }

  return <MspOrganizationCard {...data} />
}

// With a custom class override
<MspOrganizationCardSkeleton className="my-4 max-w-sm" />
```

## Notes

- Rendered as a client component (`'use client'`)
- Uses the same container dimensions and spacing tokens (`--spacing-system-m`) as `MspOrganizationCard`, ensuring a seamless swap once data resolves
- Source: [`msp-organization-card-skeleton.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/src/components/msp-organization-card-skeleton.tsx)