<!-- source-hash: 31726d42ed65c56efadaa8abd3f2fc5b -->
A React skeleton loading component that provides visual placeholders for organization icons while data is loading, ensuring consistent layout and preventing visual jumps during loading states.

## Key Components

- **OrganizationIconSkeleton**: Main skeleton component with configurable size, background, and styling options
- **OrganizationIconSkeletonProps**: TypeScript interface defining component props including size variants, styling options, and accessibility features
- **sizeClasses**: Size mapping object that matches OrganizationIcon dimensions exactly (xs: 24px to xl: 64px)
- **backgroundClasses**: Background style variants (dark, light, white) for different UI contexts

## Usage Example

```typescript
import { OrganizationIconSkeleton } from './organization-icon-skeleton'

// Basic usage in a table (default md size)
<OrganizationIconSkeleton />

// Device card with smaller size
<OrganizationIconSkeleton size="sm" backgroundStyle="light" />

// Detail view with large size
<OrganizationIconSkeleton 
  size="xl" 
  backgroundStyle="white"
  className="shadow-sm"
/>

// Without background container
<OrganizationIconSkeleton 
  size="lg" 
  showBackground={false}
/>

// Loading list with multiple skeletons
{Array.from({ length: 3 }).map((_, i) => (
  <OrganizationIconSkeleton key={i} size="md" />
))}
```

The component includes proper ARIA labels for accessibility and uses CSS animations for the pulsing skeleton effect. It maintains exact visual parity with the actual OrganizationIcon component to ensure seamless loading transitions.