<!-- source-hash: aae524b6903a622a00d4f048e78ca2ef -->
Skeleton loading components for the chat sidebar UI, providing animated placeholder states while chat dialog data is being fetched.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `ChatSidebarSkeleton` | `React.ForwardRefExoticComponent` | Full sidebar skeleton with optional new chat button and configurable dialog count |
| `DialogListItemSkeleton` | `React.ForwardRefExoticComponent` | Individual chat list item skeleton with animated title, timestamp, and chevron placeholders |

### Props

**`ChatSidebarSkeletonProps`**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | — | Additional CSS classes |
| `dialogCount` | `number` | `8` | Number of skeleton dialog items to render |
| `showNewChatButton` | `boolean` | `true` | Toggle the disabled "Start New Chat" button header |

**`DialogListItemSkeletonProps`**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | — | Additional CSS classes |

## Usage Example

```typescript
import { ChatSidebarSkeleton, DialogListItemSkeleton } from "./chat-sidebar-skeleton"

// Full sidebar skeleton during data load
function ChatLayout() {
  const { dialogs, isLoading } = useDialogs()

  if (isLoading) {
    return (
      <ChatSidebarSkeleton
        dialogCount={5}
        showNewChatButton={true}
      />
    )
  }

  return <ChatSidebar dialogs={dialogs} />
}

// Standalone skeleton item for custom lists
function CustomList() {
  return <DialogListItemSkeleton className="opacity-50" />
}
```