From 5863a49d3a507ee2e37e25bf2ac97cf29e4e81ae Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 17:13:37 +0000
Subject: [PATCH] Fix avatar loading by preventing profile state race condition

---
 src/components/auth/AuthButtons.tsx |  2 +-
 src/hooks/useAuth.tsx               | 35 +++++++++++++----------------
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/auth/AuthButtons.tsx b/src/components/auth/AuthButtons.tsx
index 18b9b58a..39053ed6 100644
--- a/src/components/auth/AuthButtons.tsx
+++ b/src/components/auth/AuthButtons.tsx
@@ -97,7 +97,7 @@ export function AuthButtons() {
   return <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">
-          <Avatar className="h-8 w-8">
+          <Avatar className="h-8 w-8" key={profile?.avatar_url || 'fallback'}>
             <AvatarImage 
               src={profile?.avatar_url || undefined}
               alt={profile?.display_name || profile?.username || user.email || 'User avatar'}
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
index d8c04ef6..3c3768e2 100644
--- a/src/hooks/useAuth.tsx
+++ b/src/hooks/useAuth.tsx
@@ -44,26 +44,22 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
 
       if (error && error.code !== 'PGRST116') {
         authError('[Auth] Error fetching profile:', error);
-        if (isMountedRef.current) {
-          setProfile(null);
-        }
+        // Don't clear profile on error - keep existing data
         return;
       }
 
-      if (isMountedRef.current) {
+      if (isMountedRef.current && data) {
         console.log('[Auth] ✅ Profile loaded:', {
-          userId: data?.user_id,
-          username: data?.username,
-          avatar_url: data?.avatar_url,
+          userId: data.user_id,
+          username: data.username,
+          avatar_url: data.avatar_url,
           hasData: !!data
         });
         setProfile(data as Profile);
       }
     } catch (error) {
       authError('[Auth] Error fetching profile:', error);
-      if (isMountedRef.current) {
-        setProfile(null);
-      }
+      // Don't clear profile on error - keep existing data
     }
   };
 
@@ -220,17 +216,18 @@ function AuthProviderComponent({ children }: { children: React.ReactNode }) {
       
       // Handle profile fetching for authenticated users (async, doesn't block loading)
       if (session?.user) {
-        if (profileFetchTimeoutRef.current) {
-          clearTimeout(profileFetchTimeoutRef.current);
-        }
-        
-        profileFetchTimeoutRef.current = setTimeout(() => {
+        // Only fetch if we don't have a profile or user ID changed
+        if (!profile || profile.user_id !== session.user.id) {
+          if (profileFetchTimeoutRef.current) {
+            clearTimeout(profileFetchTimeoutRef.current);
+            profileFetchTimeoutRef.current = null;
+          }
+          
+          // Call directly - fetchProfile is already async
           fetchProfile(session.user.id);
-          profileFetchTimeoutRef.current = null;
-        }, 0);
-      } else {
-        setProfile(null);
+        }
       }
+      // Profile is already cleared in SIGNED_OUT handler above
     });
 
     // THEN get initial session (this may trigger INITIAL_SESSION event)