improvement: loading state added to buttons who interact with backend.

frontend/src/components/ui/dashboard/DashboardAccountMenu.tsx

@@ -13,8 +13,10 @@ import {
   ChevronDown,
 } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
+import { useAsyncAction } from '@/lib/hooks/useAsyncAction';
 import { authApi } from '@/lib/api/auth';
 import type { SubscriptionAlertData } from '@/types/subscription';
+import { Button } from '@/components/ui/shared/Button';
 
 function warningTooltip(
   data: SubscriptionAlertData | null,
@@ -32,6 +34,7 @@ export function DashboardAccountMenu() {
   const t = useTranslations('auth');
   const tAccount = useTranslations('accountMenu');
   const { user, currentOrganization, logout } = useAuth();
+  const { pending: logoutPending, run: runLogout } = useAsyncAction();
   const [open, setOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
   const [alert, setAlert] = useState<SubscriptionAlertData | null>(null);
@@ -70,9 +73,11 @@ export function DashboardAccountMenu() {
   const tooltip = useMemo(() => warningTooltip(alert, tAccount), [alert, tAccount]);
 
   const handleLogout = useCallback(() => {
-    setOpen(false);
-    void logout();
-  }, [logout]);
+    return runLogout(async () => {
+      await logout();
+      setOpen(false);
+    });
+  }, [logout, runLogout]);
 
   return (
     <div className="relative z-[120]" ref={menuRef}>
@@ -146,15 +151,17 @@ export function DashboardAccountMenu() {
           </div>
 
           <div className="border-t border-border/60 pt-1">
-            <button
+            <Button
               type="button"
+              variant="ghost"
               role="menuitem"
-              className="flex w-full items-center gap-3 px-3 py-2.5 text-sm text-text-secondary hover:bg-background-card/70 hover:text-text-primary"
-              onClick={handleLogout}
+              className="flex w-full items-center justify-start gap-3 rounded-none px-3 py-2.5 text-sm text-text-secondary hover:bg-background-card/70 hover:text-text-primary"
+              isLoading={logoutPending}
+              onClick={() => handleLogout()}
             >
               <LogOut className="h-4 w-4 icon-flat shrink-0" />
               {t('signOut')}
-            </button>
+            </Button>
           </div>
         </div>
       )}