SidebarMenuSkeleton() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ SidebarMenuSkeleton() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

deprecated/www/registry/default/ui/sidebar.tsx lines 662–692

>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

  return (
    <div
      ref={ref}
      data-sidebar="menu-skeleton"
      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 max-w-[--skeleton-width] flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
})