Fix: Synchronize user and profile state updates

src/components/auth/AuthButtons.tsx

@@ -42,8 +42,8 @@ export function AuthButtons() {
     }
   };
   
-  // Show loading skeleton during auth check
-  if (loading) {
+  // Show loading skeleton during auth check OR when user exists but profile hasn't loaded yet
+  if (loading || (user && !profile)) {
     return (
       <div className="flex gap-2 items-center">
         <div className="h-8 w-16 bg-muted animate-pulse rounded" />

src/hooks/useAuth.tsx

@@ -191,6 +191,8 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
         setSession(session);
         setUser(session.user);
         sessionVerifiedRef.current = true;
+        // Keep loading true until profile is fetched
+        setLoading(true);
       } else if (event === 'INITIAL_SESSION') {
         if (session?.user) {
           authLog('[Auth] INITIAL_SESSION with user, setting session');
@@ -296,10 +298,9 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
         
         profileFetchTimeoutRef.current = setTimeout(() => {
           fetchProfile(session.user.id, 0, () => {
-            if (shouldWaitForProfile) {
+            // Always set loading to false after profile fetch for authenticated users
             authLog('[Auth] Profile fetch complete, setting loading to false');
             setLoading(false);
-            }
           });
           profileFetchTimeoutRef.current = null;
         }, 0);