@neynar/ui/llm-docs/sidebar-menu-skeleton.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# SidebarMenuSkeleton

**Type**: component

Loading skeleton placeholder for menu items Displays an animated loading placeholder while menu items are being fetched or loaded. Features random width variation to simulate realistic content and optional icon placeholder for more accurate representation.

## JSX Usage

```jsx
import { SidebarMenuSkeleton } from '@neynar/ui';

<SidebarMenuSkeleton
  className="value"
  showIcon={true}
/>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### showIcon
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic skeleton without icon
<SidebarMenu>
  <SidebarMenuItem>
    <SidebarMenuSkeleton />
  </SidebarMenuItem>
  <SidebarMenuItem>
    <SidebarMenuSkeleton />
  </SidebarMenuItem>
</SidebarMenu>
```
### Example 2
```tsx
// Skeleton with icon placeholder
<SidebarMenu>
  {Array.from({ length: 5 }).map((_, index) => (
    <SidebarMenuItem key={index}>
      <SidebarMenuSkeleton showIcon />
    </SidebarMenuItem>
  ))}
</SidebarMenu>
```
### Example 3
```tsx
// Loading state with React Suspense
<SidebarGroup>
  <SidebarGroupLabel>Projects</SidebarGroupLabel>
  <SidebarGroupContent>
    <SidebarMenu>
      <React.Suspense
        fallback={
          <>
            <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
            <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
            <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
          </>
        }
      >
        <ProjectsList />
      </React.Suspense>
    </SidebarMenu>
  </SidebarGroupContent>
</SidebarGroup>
```