fix(frontend): show spinner login/logout (#11447)

## Changes 🏗️

Show spinners on the login/logout buttons while they are being
processed.

## Checklist 📋

### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Login with password: there is a spinner on the button while
logging in
  - [x] Logout: there is a spinner on the button while logging out

Author: 0ubbe

autogpt_platform/frontend/src/app/(platform)/login/useLoginPage.ts

@@ -62,6 +62,9 @@ export function useLoginPage() {
   }
 
   async function handleLogin(data: z.infer<typeof loginFormSchema>) {
+    setIsLoading(true);
+    setIsLoggingIn(true);
+
     if (data.email.includes("@agpt.co")) {
       toast({
         title: "Please use Google SSO to login using an AutoGPT email.",
@@ -73,8 +76,6 @@ export function useLoginPage() {
       return;
     }
 
-    setIsLoggingIn(true);
-
     try {
       const result = await loginAction(data.email, data.password);
 

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/AccountLogoutOption.tsx

@@ -1,43 +1,45 @@
 "use client";
 import { IconLogOut } from "@/components/__legacy__/ui/icons";
 import { LoadingSpinner } from "@/components/__legacy__/ui/loading";
-import { toast } from "@/components/molecules/Toast/use-toast";
+import { useToast } from "@/components/molecules/Toast/use-toast";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { cn } from "@/lib/utils";
 import * as Sentry from "@sentry/nextjs";
-import { useTransition } from "react";
+import { useState } from "react";
 
 export function AccountLogoutOption() {
-  const [isPending, startTransition] = useTransition();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
   const supabase = useSupabase();
+  const { toast } = useToast();
 
-  function handleLogout() {
-    startTransition(async () => {
-      try {
-        await supabase.logOut();
-      } catch (e) {
-        Sentry.captureException(e);
-        toast({
-          title: "Error logging out",
-          description:
-            "Something went wrong when logging out. Please try again. If the problem persists, please contact support.",
-          variant: "destructive",
-        });
-      }
-    });
+  async function handleLogout() {
+    setIsLoggingOut(true);
+    try {
+      await supabase.logOut();
+    } catch (e) {
+      Sentry.captureException(e);
+      toast({
+        title: "Error logging out",
+        description:
+          "Something went wrong when logging out. Please try again. If the problem persists, please contact support.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoggingOut(false);
+    }
   }
 
   return (
     <div
       className={cn(
         "inline-flex w-full items-center justify-start gap-2.5",
-        isPending && "justify-center",
+        isLoggingOut && "justify-center opacity-50",
       )}
       onClick={handleLogout}
       role="button"
       tabIndex={0}
     >
-      {isPending ? (
+      {isLoggingOut ? (
         <LoadingSpinner className="size-5" />
       ) : (
         <>