Loading state skeleton components for the chat sidebar, rendering animated placeholder UI while conversation data is being fetched.
## Key Components
### `DialogListItemSkeleton`
A single row skeleton mimicking a chat conversation list item. Renders animated pulse placeholders for the title, timestamp, and chevron icon using `animate-pulse` on `bg-ods-border` elements.
**Props:**
| Prop | Type | Description |
|------|------|-------------|
| `className` | `string?` | Additional CSS classes |
### `ChatSidebarSkeleton`
Full sidebar skeleton wrapping multiple `DialogListItemSkeleton` rows with an optional disabled "Start New Chat" button header.
**Props:**
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string?` | — | Additional CSS classes |
| `dialogCount` | `number` | `8` | Number of skeleton rows to render |
| `showNewChatButton` | `boolean` | `true` | Whether to render the disabled new chat button |
## Usage Example
```typescript
import { ChatSidebarSkeleton, DialogListItemSkeleton } from "./chat-sidebar-skeleton"
// Full sidebar skeleton during initial load
function ChatLayout() {
const { data, isLoading } = useConversations()
if (isLoading) {
return
}
return
}
// Single item skeleton for partial list loading
function ConversationList() {
return (
{conversations.map(c => )}
{isFetchingMore && }
)
}
```
Both components use `React.forwardRef` for DOM ref forwarding and accept standard `HTMLDivElement` props via spread. Styles follow the ODS design token conventions (`ods-bg`, `ods-border`, `ods-card`).
**Source:** [`chat-sidebar-skeleton.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/src/components/chat-sidebar-skeleton.tsx)