update Skeleton on Navigation

Zaid-maker · Dec 21, 2023 · 2d20833 · 2d20833
1 parent 2dfbd60
commit 2d20833
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/app/(dashboard)/u/[username]/_components/sidebar/nav-item.tsx b/app/(dashboard)/u/[username]/_components/sidebar/nav-item.tsx
@@ -45,8 +45,8 @@ export const NavItem = ({
 export const NavItemSkeleton = () => {
   return (
     <li className="flex items-center gap-x-4 px-3 py-2">
-      <Skeleton className="min-h-[32px] min-w-[32px] rounded-full" />
-      <div className="flex-1">
+      <Skeleton className="min-h-[48px] min-w-[48px] rounded-md" />
+      <div className="flex-1 hidden lg:block">
         <Skeleton className="h-6" />
       </div>
     </li>

diff --git a/app/(dashboard)/u/[username]/_components/sidebar/navigation.tsx b/app/(dashboard)/u/[username]/_components/sidebar/navigation.tsx
@@ -3,7 +3,7 @@
 import { useUser } from "@clerk/nextjs";
 import { Fullscreen, KeyRound, MessageSquare, Users } from "lucide-react";
 import { usePathname } from "next/navigation";
-import { NavItem } from "./nav-item";
+import { NavItem, NavItemSkeleton } from "./nav-item";
 
 export const Navigation = () => {
   const pathname = usePathname();
@@ -32,6 +32,16 @@ export const Navigation = () => {
     },
   ];
 
+  if (!user?.username) {
+    return (
+      <ul className="space-y-2">
+        {[...Array(4)].map((_, i) => (
+          <NavItemSkeleton key={i} />
+        ))}
+      </ul>
+    );
+  }
+
   return (
     <div className="space-y-2 px-2 pt-4 lg:pt-0">
       {routes.map((route) => (