fix(header): add loading state handling in Header component

app/components/header.tsx

@@ -49,14 +49,38 @@ const userMenuItems = [
 ];
 
 export default function Header() {
-  const { isAuthenticated, getUser } = useKindeBrowserClient();
+  const { isAuthenticated, getUser, isLoading } = useKindeBrowserClient();
   const user = getUser();
 
+  if (isLoading) {
+    return (
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container flex h-16 items-center justify-between">
+          <div className="flex items-center gap-6">
+            <Link href="/" className="flex items-center space-x-2">
+              <Image
+                src="/vtorio.svg"
+                alt="vtor.io"
+                width={32}
+                height={8}
+                className="h-8 w-auto"
+                priority
+              />
+            </Link>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="h-8 w-20 bg-gray-200 animate-pulse rounded"></div>
+          </div>
+        </div>
+      </header>
+    );
+  }
+
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container flex h-16 items-center justify-between">
         <div className="flex items-center gap-6">
-          <Link href="/" className="flex items-center space-x-2" >
+          <Link href="/" className="flex items-center space-x-2">
             <Image
               src="/vtorio.svg"
               alt="vtor.io"
@@ -163,7 +187,7 @@ export default function Header() {
             </SheetTrigger>
             <SheetContent side="right" className="w-[300px]">
               <div className="flex flex-col space-y-4 mt-8">
-                <Link href="/" className="flex items-center space-x-2" >
+                <Link href="/" className="flex items-center space-x-2">
                   <Home className="h-4 w-4" />
                   <span>Home</span>
                 </Link>
@@ -172,7 +196,7 @@ export default function Header() {
                   <Link
                     key={item.title}
                     href={item.href}
-                    className="flex items-center space-x-2" >
+                    className="flex items-center space-x-2">
                     <item.icon className="h-4 w-4" />
                     <span>{item.title}</span>
                   </Link>
@@ -196,7 +220,7 @@ export default function Header() {
                         <Link
                           key={item.title}
                           href={item.href}
-                          className="flex items-center space-x-2 py-2" >
+                          className="flex items-center space-x-2 py-2">
                           <item.icon className="h-4 w-4" />
                           <span>{item.title}</span>
                         </Link>