<!-- source-hash: 778a7f2774363f614672d36f1704ffb9 -->
Loading skeleton component that mimics the exact layout of a `DeviceCard` to prevent layout shifts during data fetching.

## Key Components

### `DeviceCardSkeleton`
A single animated placeholder card matching the three-row `DeviceCard` structure:
- **Row 1:** Device icon + device name + more button
- **Row 2:** OS badge + organization icon + organization name
- **Row 3:** Status badge + last seen timestamp

| Prop | Type | Description |
|------|------|-------------|
| `className` | `string?` | Additional CSS classes |

### `DeviceCardSkeletonGrid`
Renders a responsive grid of `DeviceCardSkeleton` instances, matching the `DevicesGrid` responsive column layout.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `count` | `number?` | `12` | Number of skeleton cards to render |
| `className` | `string?` | — | Additional CSS classes |

**Responsive columns:** 1 → 2 (md) → 4 (lg)

## Usage Example

```typescript
// Single skeleton card
import { DeviceCardSkeleton } from "./device-card-skeleton"

function DeviceDetailLoader() {
  return <DeviceCardSkeleton className="max-w-sm" />
}

// Full grid during page load
import { DeviceCardSkeletonGrid } from "./device-card-skeleton"

function DevicesPage({ isLoading, devices }) {
  if (isLoading) {
    return <DeviceCardSkeletonGrid count={8} />
  }
  return <DevicesGrid devices={devices} />
}
```

> Both components include ARIA attributes (`role="status"` and `aria-label`) for screen reader accessibility during loading states.