<!-- source-hash: dc7cb2f1d39ceeb5b0684dbef38a8d20 -->
Animated loading skeleton components that simulate the layout of chat messages while content is being fetched, matching the `ChatMessageEnhanced` hanging-avatar layout.

## Key Components

### `ChatMessageSkeleton`
Renders a single animated placeholder message with pulsing blocks for the avatar, sender name, timestamp, and multi-line message content.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | — | Additional CSS classes |
| `showAvatar` | `boolean` | `true` | Whether to render the avatar skeleton |
| `isUser` | `boolean` | `false` | Applies user-message styling (no card background, no avatar) |
| `assistantType` | `'mingo' \| 'fae'` | `'fae'` | Controls avatar gradient — cyan for Mingo, pink for Fae |

### `ChatMessageListSkeleton`
Renders a scrollable list of `ChatMessageSkeleton` items, mimicking a full chat viewport during initial load.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `messageCount` | `number` | `6` | Number of skeleton messages to render |
| `showAvatars` | `boolean` | `true` | Passed through to each `ChatMessageSkeleton` |
| `assistantType` | `'mingo' \| 'fae'` | `'fae'` | Applied to all assistant messages |
| `contentClassName` | `string` | — | Overrides default horizontal padding on the content wrapper |

## Usage Example

```typescript
// Single message skeleton (e.g. while streaming)
<ChatMessageSkeleton assistantType="mingo" showAvatar />

// Full chat list skeleton on initial page load
<ChatMessageListSkeleton
  messageCount={8}
  assistantType="fae"
  showAvatars={true}
/>
```

> Every third message (`index % 3 === 0`) is rendered as a user bubble; the rest render as assistant messages with the appropriate Mingo/Fae avatar gradient.