feat: add skeleton loaders for improved loading state in Dashboard and Header components

src/components/layout/Header.tsx

@@ -4,9 +4,10 @@ import { SiGitea } from "react-icons/si";
 import { ModeToggle } from "@/components/theme/ModeToggle";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { toast } from "sonner";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export function Header() {
-  const { user, logout } = useAuth();
+  const { user, logout, isLoading } = useAuth();
 
   const handleLogout = async () => {
     toast.success("Logged out successfully");
@@ -15,6 +16,16 @@ export function Header() {
     logout();
   };
 
+  // Auth buttons skeleton loader
+  function AuthButtonsSkeleton() {
+    return (
+      <>
+        <Skeleton className="h-10 w-10 rounded-full" /> {/* Avatar placeholder */}
+        <Skeleton className="h-10 w-24" /> {/* Button placeholder */}
+      </>
+    );
+  }
+
   return (
     <header className="border-b bg-background">
       <div className="flex h-[4.5rem] items-center justify-between px-6">
@@ -25,7 +36,10 @@ export function Header() {
 
         <div className="flex items-center gap-4">
           <ModeToggle />
-          {user ? (
+
+          {isLoading ? (
+            <AuthButtonsSkeleton />
+          ) : user ? (
             <>
               <Avatar>
                 <AvatarImage src="" alt="@shadcn" />