<!-- source-hash: 45999614de7204fe66e3d0b2ca239d81 -->
Loading skeleton component that renders a placeholder for `OrganizationIcon`/`VendorIcon` during async data fetching, preventing layout shifts by matching the icon's exact dimensions and styling.

## Key Components

### `OrganizationIconSkeletonProps`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'l' \| 'xl'` | `'md'` | Pixel size variant (24px–64px) |
| `className` | `string` | `''` | Additional Tailwind/CSS classes |
| `showBackground` | `boolean` | `true` | Toggles the container background and border |
| `backgroundStyle` | `'dark' \| 'light' \| 'white'` | `'dark'` | Background color variant |

### `OrganizationIconSkeleton`
The exported functional component. Renders an animated pulse placeholder (`animate-pulse`) sized to match the target icon exactly.

**Size → class mapping:**

| Size | Class | Pixels |
|------|-------|--------|
| `xs` | `w-6 h-6` | 24px |
| `sm` | `w-8 h-8` | 32px |
| `md` | `w-10 h-10` | 40px |
| `lg` | `w-12 h-12` | 48px |
| `l` | `w-14 h-14` | 56px |
| `xl` | `w-16 h-16` | 64px |

## Usage Example

```typescript
// Default — organizations table / dashboard
<OrganizationIconSkeleton size="md" />

// Devices table
<OrganizationIconSkeleton size="sm" />

// Detail / profile view
<OrganizationIconSkeleton size="xl" backgroundStyle="light" />

// Icon-only, no background container
<OrganizationIconSkeleton size="sm" showBackground={false} />

// White card background with extra margin
<OrganizationIconSkeleton
  size="lg"
  backgroundStyle="white"
  className="mr-3"
/>
```

## Source

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