添加控制台菜单加载态

tone-page-web/components/app-sidebar.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import {
   CloudUpload,
   Inbox,
+  LucideIcon,
   Mail,
   Server,
   SquareTerminal,
@@ -34,7 +35,22 @@ export function AppSidebar({ user, isUserLoading, ...props }: React.ComponentPro
       email: "m@example.com",
       avatar: "/avatars/shadcn.jpg",
     },
-    navMain: [
+    navMain: null as null | {
+      title: string
+      url: string
+      icon?: LucideIcon
+      isActive?: boolean
+      isHidden?: boolean
+      items?: {
+        title: string
+        url: string
+        isHidden?: boolean
+      }[]
+    }[],
+  }
+
+  if (!isUserLoading) {
+    data.navMain = [
       {
         title: "网站管理",
         url: "/console/web",
@@ -101,7 +117,7 @@ export function AppSidebar({ user, isUserLoading, ...props }: React.ComponentPro
         url: "/",
         icon: Undo2,
       },
-    ],
+    ]
   }
 
   return (

tone-page-web/components/nav-main.tsx

@@ -18,13 +18,12 @@ import {
   SidebarMenuSubItem,
 } from "@/components/ui/sidebar"
 import Link from "next/link"
-import { usePathname } from "next/navigation"
-import { useState, useEffect } from "react"
+import { Skeleton } from "./ui/skeleton"
 
 export function NavMain({
   items,
 }: {
-  items: {
+  items: null | {
     title: string
     url: string
     icon?: LucideIcon
@@ -41,7 +40,13 @@ export function NavMain({
     <SidebarGroup>
       <SidebarGroupLabel>菜单</SidebarGroupLabel>
       <SidebarMenu>
-        {items.filter(i => !i.isHidden).map((item) => (
+        {
+          !items && Array(5).fill(null).map((_, i) => (
+            <Skeleton key={i} className="w-full h-7 mt-1" />
+          ))
+        }
+
+        {items && items.filter(i => !i.isHidden).map((item) => (
           (item.items && item.items.length > 0)
             ? (
               <Collapsible