Refactor: Simplify auth and profile handling

src/components/auth/AuthButtons.tsx

@@ -5,16 +5,13 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { User, Settings, LogOut } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
+import { useProfile } from '@/hooks/useProfile';
 import { useToast } from '@/hooks/use-toast';
 import { AuthModal } from './AuthModal';
 
 export function AuthButtons() {
-  const {
-    user,
-    profile,
-    loading,
-    signOut
-  } = useAuth();
+  const { user, loading: authLoading, signOut } = useAuth();
+  const { data: profile, isLoading: profileLoading } = useProfile(user?.id);
   const navigate = useNavigate();
   const {
     toast
@@ -43,7 +40,7 @@ export function AuthButtons() {
   };
   
   // Show loading skeleton only during initial auth check
-  if (loading) {
+  if (authLoading) {
     return (
       <div className="flex gap-2 items-center">
         <div className="h-8 w-16 bg-muted animate-pulse rounded" />
@@ -83,17 +80,6 @@ export function AuthButtons() {
       </>
     );
   }
-  // Debug logging for avatar rendering
-  console.log('[AuthButtons] Component render:', {
-    hasUser: !!user,
-    hasProfile: !!profile,
-    hasAvatarUrl: !!profile?.avatar_url,
-    avatarUrl: profile?.avatar_url,
-    displayName: profile?.display_name,
-    username: profile?.username,
-    loading
-  });
-
   return <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" className="relative h-8 w-8 rounded-full">