SidebarMenuSkeleton() — ui Function Reference

Architecture documentation for the SidebarMenuSkeleton() function in sidebar.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ SidebarMenuSkeleton() — ui Function Reference

Dependency Diagram

graph TD
  25caea9d_7b51_24ae_d796_13e8ee8ffe17["SidebarMenuSkeleton()"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65["sidebar.tsx"]
  25caea9d_7b51_24ae_d796_13e8ee8ffe17 -->|defined in| 91f6d996_a9f5_b129_3201_f8eee4d8cf65
  style 25caea9d_7b51_24ae_d796_13e8ee8ffe17 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/ui/sidebar.tsx lines 609–645

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<"div"> & {
  showIcon?: boolean
}) {
  // Random width between 50 to 90%.
  const [width] = React.useState(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  })

  return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn("cn-sidebar-menu-skeleton flex items-center", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="cn-sidebar-menu-skeleton-icon"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="cn-sidebar-menu-skeleton-text max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
}