Fix: Resolve authentication state recognition issues

src/components/auth/AuthButtons.tsx

@@ -12,6 +12,7 @@ export function AuthButtons() {
   const {
     user,
     profile,
+    loading,
     signOut
   } = useAuth();
   const navigate = useNavigate();
@@ -40,10 +41,21 @@ export function AuthButtons() {
       setLoggingOut(false);
     }
   };
+  
+  // Show loading skeleton during auth check
+  if (loading) {
+    return (
+      <div className="flex gap-2 items-center">
+        <div className="h-8 w-16 bg-muted animate-pulse rounded" />
+        <div className="h-8 w-8 bg-muted animate-pulse rounded-full" />
+      </div>
+    );
+  }
+  
   if (!user) {
     return (
       <>
-      <Button 
+      <Button
         variant="ghost" 
         size="sm" 
         onClick={() => {

src/components/auth/AuthModal.tsx

@@ -78,6 +78,10 @@ export function AuthModal({ open, onOpenChange, defaultTab = 'signin' }: AuthMod
         title: "Welcome back!",
         description: "You've been signed in successfully."
       });
+      
+      // Wait for auth state to propagate before closing
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
       onOpenChange(false);
     } catch (error: any) {
       setSignInCaptchaKey(prev => prev + 1);