Skeleton loading components for chat message rows and lists, mirroring the layout of `ChatMessageEnhanced` and `ChatMessageList` with pulsing placeholder elements. ## Key Components ### `ChatMessageSkeleton` Single message-row skeleton with an inline avatar (assistant only), name/timestamp placeholders, and configurable body lines. Uses percentage-based widths so placeholders reflow correctly on panel resize. **Props:** | Prop | Type | Default | Description | |---|---|---|---| | `showAvatar` | `boolean` | `true` | Show circular avatar placeholder | | `isUser` | `boolean` | `false` | Hides avatar for user-side messages | | `bodyLines` | `number` | `3` | Number of body line placeholders | | `className` | `string` | — | Additional class names | ### `ChatMessageListSkeleton` Renders a configurable list of `ChatMessageSkeleton` rows. Supports two layout modes: - **Default** — bottom-anchors rows with inner scroll, matching `ChatMessageList` - **Fill mode** (`fill=true`) — top-anchors rows and clips overflow so the entire panel appears to be loading regardless of container height **Props:** | Prop | Type | Default | Description | |---|---|---|---| | `messageCount` | `number` | `6` | Number of skeleton rows | | `showAvatars` | `boolean` | `true` | Forward avatar visibility to rows | | `fullWidth` | `boolean` | `false` | Drops `max-w-ods-content-narrow` column | | `bodyLines` | `number` | `3` | Forwarded to each `ChatMessageSkeleton` | | `fill` | `boolean` | `false` | Enable fill/clip layout mode | | `contentClassName` | `string` | — | Classes on the inner content column | ## Usage Example ```typescript // Default paragraph-style skeleton list // Single-line messages (e.g. hero demo turns) — prevents oversized skeleton // Fill mode: whole panel reads as loading // Individual row with one body line ```