chore: add loading spinners for all auth and onboarding form buttons.

admin/app/login/components/sign-in-form.tsx

@@ -5,7 +5,7 @@ import { useSearchParams } from "next/navigation";
 // services
 import { AuthService } from "@/services/auth.service";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "components/common";
 // icons
@@ -52,6 +52,7 @@ export const InstanceSignInForm: FC = (props) => {
   const [showPassword, setShowPassword] = useState(false);
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
@@ -85,7 +86,10 @@ export const InstanceSignInForm: FC = (props) => {
     } else return { type: undefined, message: undefined };
   }, [errorCode, errorMessage]);
 
-  const isButtonDisabled = useMemo(() => (formData.email && formData.password ? false : true), [formData]);
+  const isButtonDisabled = useMemo(
+    () => (!isSubmitting && formData.email && formData.password ? false : true),
+    [formData.email, formData.password, isSubmitting]
+  );
 
   return (
     <div className="relative w-full h-full overflow-hidden container mx-auto px-5 md:px-0 flex justify-center items-center">
@@ -97,7 +101,13 @@ export const InstanceSignInForm: FC = (props) => {
 
         {errorData.type && errorData?.message && <Banner type="error" message={errorData?.message} />}
 
-        <form className="space-y-4" method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-in/`}>
+        <form
+          className="space-y-4"
+          method="POST"
+          action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
+          onSubmit={() => setIsSubmitting(true)}
+          onError={() => setIsSubmitting(false)}
+        >
           <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
 
           <div className="w-full space-y-1">
@@ -153,7 +163,7 @@ export const InstanceSignInForm: FC = (props) => {
           </div>
           <div className="py-2">
             <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              Sign in
+              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
             </Button>
           </div>
         </form>

admin/app/setup/components/sign-up-form.tsx

@@ -5,7 +5,7 @@ import { useSearchParams } from "next/navigation";
 // services
 import { AuthService } from "@/services/auth.service";
 // ui
-import { Button, Checkbox, Input } from "@plane/ui";
+import { Button, Checkbox, Input, Spinner } from "@plane/ui";
 // components
 import { Banner, PasswordStrengthMeter } from "components/common";
 // icons
@@ -68,6 +68,7 @@ export const InstanceSignUpForm: FC = (props) => {
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [formData, setFormData] = useState<TFormData>(defaultFromData);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
     setFormData((prev) => ({ ...prev, [key]: value }));
@@ -109,6 +110,7 @@ export const InstanceSignUpForm: FC = (props) => {
 
   const isButtonDisabled = useMemo(
     () =>
+      !isSubmitting &&
       formData.first_name &&
       formData.email &&
       formData.password &&
@@ -116,7 +118,7 @@ export const InstanceSignUpForm: FC = (props) => {
       formData.password === formData.confirm_password
         ? false
         : true,
-    [formData]
+    [formData.confirm_password, formData.email, formData.first_name, formData.password, isSubmitting]
   );
 
   return (
@@ -133,7 +135,13 @@ export const InstanceSignUpForm: FC = (props) => {
             <Banner type="error" message={errorData?.message} />
           )}
 
-        <form className="space-y-4" method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-up/`}>
+        <form
+          className="space-y-4"
+          method="POST"
+          action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
+          onSubmit={() => setIsSubmitting(true)}
+          onError={() => setIsSubmitting(false)}
+        >
           <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
 
           <div className="flex items-center gap-4">
@@ -252,25 +260,33 @@ export const InstanceSignUpForm: FC = (props) => {
             <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
               Confirm password
             </label>
-            <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+            <div className="relative">
               <Input
                 type={showPassword ? "text" : "password"}
+                id="confirm_password"
                 name="confirm_password"
+                inputSize="md"
                 value={formData.confirm_password}
                 onChange={(e) => handleFormChange("confirm_password", e.target.value)}
                 placeholder="Confirm password"
-                className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+                className={cn("w-full pr-10")}
               />
               {showPassword ? (
-                <EyeOff
+                <button
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  type="button"
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
                   onClick={() => setShowPassword(false)}
-                />
+                >
+                  <EyeOff className="h-4 w-4" />
+                </button>
               ) : (
-                <Eye
+                <button
-                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  type="button"
+                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
                   onClick={() => setShowPassword(true)}
-                />
+                >
+                  <Eye className="h-4 w-4" />
+                </button>
               )}
             </div>
             {!!formData.confirm_password && formData.password !== formData.confirm_password && (
@@ -298,7 +314,7 @@ export const InstanceSignUpForm: FC = (props) => {
 
           <div className="py-2">
             <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              Continue
+              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
             </Button>
           </div>
         </form>

space/components/accounts/auth-forms/email.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
+// types
+import { IEmailCheckData } from "types/auth";
 // icons
 import { XCircle, CircleAlert } from "lucide-react";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "@/helpers/string.helper";
-// types
-import { IEmailCheckData } from "types/auth";
 
 type Props = {
   onSubmit: (data: IEmailCheckData) => Promise<void>;
@@ -84,8 +84,8 @@ export const EmailForm: React.FC<Props> = (props) => {
           )}
         />
       </div>
-      <Button type="submit" variant="primary" className="w-full" size="lg" disabled={!isValid} loading={isSubmitting}>
+      <Button type="submit" variant="primary" className="w-full" size="lg" disabled={!isValid || isSubmitting}>
-        Continue
+        {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
       </Button>
     </form>
   );

space/components/accounts/auth-forms/password.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Eye, EyeOff, XCircle } from "lucide-react";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 import { EAuthModes, EAuthSteps, ForgotPasswordPopover, PasswordStrengthMeter } from "@/components/accounts";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
@@ -40,6 +40,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
   const [showPassword, setShowPassword] = useState(false);
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   // hooks
   const {
     instanceStore: { instance },
@@ -82,6 +83,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
 
   const isButtonDisabled = useMemo(
     () =>
+      !isSubmitting &&
       !!passwordFormData.password &&
       (mode === EAuthModes.SIGN_UP
         ? getPasswordStrength(passwordFormData.password) >= 3 &&
@@ -89,7 +91,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
         : true)
         ? false
         : true,
-    [mode, passwordFormData]
+    [isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password]
   );
 
   return (
@@ -97,6 +99,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
       className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
       method="POST"
       action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
+      onSubmit={() => setIsSubmitting(true)}
+      onError={() => setIsSubmitting(false)}
     >
       <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
       <input type="hidden" name="next_path" value={next_path} />
@@ -153,7 +157,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
         </div>
         {passwordSupport}
       </div>
-      {mode === EAuthModes.SIGN_UP && getPasswordStrength(passwordFormData.password) >= 3 && (
+      {mode === EAuthModes.SIGN_UP && (
         <div className="space-y-1">
           <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
             Confirm password
@@ -188,7 +192,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
         {mode === EAuthModes.SIGN_IN ? (
           <>
             <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-              Go to board
+              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Go to board"}
             </Button>
             {instance && isSmtpConfigured && (
               <Button
@@ -204,7 +208,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
           </>
         ) : (
           <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-            Create account
+            {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
           </Button>
         )}
       </div>

space/components/accounts/auth-forms/unique-code.tsx

@@ -8,7 +8,7 @@ import { IEmailCheckData } from "types/auth";
 // icons
 import { CircleCheck, XCircle } from "lucide-react";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 // services
@@ -41,6 +41,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
   const [uniqueCodeFormData, setUniqueCodeFormData] = useState<TUniqueCodeFormValues>({ ...defaultValues, email });
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   // router
   const router = useRouter();
   const { next_path } = router.query;
@@ -99,12 +100,15 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
   }, []);
 
   const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
+  const isButtonDisabled = isRequestingNewCode || !uniqueCodeFormData.code || isSubmitting;
 
   return (
     <form
       className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
       method="POST"
       action={`${API_BASE_URL}/auth/spaces/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
+      onSubmit={() => setIsSubmitting(true)}
+      onError={() => setIsSubmitting(false)}
     >
       <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
       <input type="hidden" name="next_path" value={next_path} />
@@ -170,15 +174,14 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
           </button>
         </div>
       </div>
-      <Button
+      <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-        type="submit"
+        {isRequestingNewCode ? (
-        variant="primary"
+          "Sending code"
-        className="w-full"
+        ) : isSubmitting ? (
-        size="lg"
+          <Spinner height="20px" width="20px" />
-        loading={isRequestingNewCode}
+        ) : (
-        disabled={isRequestingNewCode || !uniqueCodeFormData.code}
+          submitButtonText
-      >
+        )}
-        {isRequestingNewCode ? "Sending code" : submitButtonText}
       </Button>
     </form>
   );

space/components/accounts/onboarding-form.tsx

@@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 // types
 import { IUser } from "@plane/types";
 // ui
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { UserImageUploadModal } from "@/components/accounts";
 // hooks
@@ -93,7 +93,7 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
     });
   };
 
-  const isButtonDisabled = useMemo(() => (isValid ? false : true), [isValid]);
+  const isButtonDisabled = useMemo(() => (isValid && !isSubmitting ? false : true), [isSubmitting, isValid]);
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
@@ -202,15 +202,8 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
           {errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>}
         </div>
       </div>
-      <Button
+      <Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-        variant="primary"
+        {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-        type="submit"
-        size="lg"
-        className="w-full"
-        disabled={isButtonDisabled}
-        loading={isSubmitting}
-      >
-        Continue
       </Button>
     </form>
   );

web/components/account/auth-forms/email.tsx

@@ -5,7 +5,7 @@ import { CircleAlert, XCircle } from "lucide-react";
 // types
 import { IEmailCheckData } from "@plane/types";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "@/helpers/string.helper";
 
@@ -35,6 +35,8 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
     setIsSubmitting(false);
   };
 
+  const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
+
   return (
     <form onSubmit={handleFormSubmit} className="mx-auto mt-8 space-y-4 w-5/6 sm:w-96">
       <div className="space-y-1">
@@ -72,10 +74,9 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
         variant="primary"
         className="w-full"
         size="lg"
-        disabled={email.length === 0 || Boolean(emailError?.email)}
+        disabled={isButtonDisabled}
-        loading={isSubmitting}
       >
-        Continue
+        {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
       </Button>
     </form>
   );

web/components/account/auth-forms/password.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 // icons
 import { Eye, EyeOff, XCircle } from "lucide-react";
 // ui
-import { Button, Input } from "@plane/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { ForgotPasswordPopover, PasswordStrengthMeter } from "@/components/account";
 // constants
@@ -45,6 +45,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
   const [showPassword, setShowPassword] = useState(false);
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   // hooks
   const { instance } = useInstance();
   const { captureEvent } = useEventTracker();
@@ -84,6 +85,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
 
   const isButtonDisabled = useMemo(
     () =>
+      !isSubmitting &&
       !!passwordFormData.password &&
       (mode === EAuthModes.SIGN_UP
         ? getPasswordStrength(passwordFormData.password) >= 3 &&
@@ -91,7 +93,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
         : true)
         ? false
         : true,
-    [mode, passwordFormData]
+    [isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password]
   );
 
   return (
@@ -99,6 +101,8 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
       className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
       method="POST"
       action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
+      onSubmit={() => setIsSubmitting(true)}
+      onError={() => setIsSubmitting(false)}
     >
       <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
       <div className="space-y-1">
@@ -189,7 +193,13 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
         {mode === EAuthModes.SIGN_IN ? (
           <>
             <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-              {isSmtpConfigured ? "Continue" : "Go to workspace"}
+              {isSubmitting ? (
+                <Spinner height="20px" width="20px" />
+              ) : isSmtpConfigured ? (
+                "Continue"
+              ) : (
+                "Go to workspace"
+              )}
             </Button>
             {instance && isSmtpConfigured && (
               <Button
@@ -205,11 +215,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
           </>
         ) : (
           <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-            Create account
+            {isSubmitting ? <Spinner height="20px" width="20px" /> : "Create account"}
           </Button>
         )}
       </div>
     </form>
   );
 });
-

web/components/account/auth-forms/sign-up-root.tsx

@@ -63,7 +63,7 @@ export const SignUpAuthRoot: FC = observer(() => {
     await authService
       .signUpEmailCheck(data)
       .then(() => {
-        if (isSmtpConfigured) setAuthStep(EAuthSteps.PASSWORD);
+        if (isSmtpConfigured) setAuthStep(EAuthSteps.UNIQUE_CODE);
         else setAuthStep(EAuthSteps.PASSWORD);
       })
       .catch((error) => {

web/components/account/auth-forms/unique-code.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
 import { IEmailCheckData } from "@plane/types";
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { EAuthModes } from "@/helpers/authentication.helper";
 import { API_BASE_URL } from "@/helpers/common.helper";
@@ -36,6 +36,7 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
   const [uniqueCodeFormData, setUniqueCodeFormData] = useState<TUniqueCodeFormValues>({ ...defaultValues, email });
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   // store hooks
   // const { captureEvent } = useEventTracker();
   // timer
@@ -88,12 +89,15 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
   }, []);
 
   const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
+  const isButtonDisabled = isRequestingNewCode || !uniqueCodeFormData.code || isSubmitting;
 
   return (
     <form
       className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
       method="POST"
       action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
+      onSubmit={() => setIsSubmitting(true)}
+      onError={() => setIsSubmitting(false)}
     >
       <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
       <div className="space-y-1">
@@ -159,15 +163,14 @@ export const AuthUniqueCodeForm: React.FC<Props> = (props) => {
           </button>
         </div>
       </div>
-      <Button
+      <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-        type="submit"
+        {isRequestingNewCode ? (
-        variant="primary"
+          "Sending code"
-        className="w-full"
+        ) : isSubmitting ? (
-        size="lg"
+          <Spinner height="20px" width="20px" />
-        loading={isRequestingNewCode}
+        ) : (
-        disabled={isRequestingNewCode || !uniqueCodeFormData.code}
+          submitButtonText
-      >
+        )}
-        {isRequestingNewCode ? "Sending code" : submitButtonText}
       </Button>
     </form>
   );

web/components/onboarding/create-workspace.tsx

@@ -3,7 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 // types
 import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // ui
-import { Button, CustomSelect, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, CustomSelect, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { WORKSPACE_CREATED } from "@/constants/event-tracker";
 import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@/constants/workspace";
@@ -116,6 +116,8 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
     });
   };
 
+  const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
+
   return (
     <div className="space-y-4">
       {!!invitedWorkspaces && (
@@ -256,8 +258,8 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
             )}
           </div>
         </div>
-        <Button variant="primary" type="submit" size="lg" className="w-full" disabled={!isValid || invalidSlug}>
+        <Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-          {isSubmitting ? "Creating..." : "Continue"}
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
         </Button>
       </form>
     </div>

web/components/onboarding/invitations.tsx

@@ -3,7 +3,7 @@ import useSWR from "swr";;
 // types
 import { IWorkspaceMemberInvitation } from "@plane/types";
 // ui
-import { Button, Checkbox } from "@plane/ui";
+import { Button, Checkbox, Spinner } from "@plane/ui";
 // constants
 import { MEMBER_ACCEPTED } from "@/constants/event-tracker";
 import { USER_WORKSPACE_INVITATIONS } from "@/constants/fetch-keys";
@@ -127,7 +127,7 @@ export const Invitations: React.FC<Props> = (props) => {
         onClick={submitInvitations}
         disabled={isJoiningWorkspaces || !invitationsRespond.length}
       >
-        Continue to workspace
+        {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue to workspace"}
       </Button>
       <div className="mx-auto mt-4 flex items-center sm:w-96">
         <hr className="w-full border-onboarding-border-100" />

web/components/onboarding/invite-members.tsx

@@ -18,7 +18,7 @@ import { Listbox, Transition } from "@headlessui/react";
 // types
 import { IUser, IWorkspace } from "@plane/types";
 // ui
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { MEMBER_INVITED } from "@/constants/event-tracker";
 import { EUserWorkspaceRoles, ROLE, ROLE_DETAILS } from "@/constants/workspace";
@@ -420,10 +420,9 @@ export const InviteMembers: React.FC<Props> = (props) => {
                 type="submit"
                 size="lg"
                 className="w-full"
-                disabled={isInvitationDisabled || !isValid}
+                disabled={isInvitationDisabled || !isValid || isSubmitting}
-                loading={isSubmitting}
               >
-                Continue
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
               </Button>
               <Button variant="link-neutral" size="lg" className="w-full" onClick={nextStep}>
                 I’ll do it later

web/components/onboarding/profile-setup.tsx

@@ -7,7 +7,7 @@ import { Eye, EyeOff } from "lucide-react";
 // types
 import { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
 // ui
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { PasswordStrengthMeter } from "@/components/account";
 import { UserImageUploadModal } from "@/components/core";
@@ -248,6 +248,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
   // Also handles the condition for optional password i.e if password field is optional it only checks for above validation if it's not empty.
   const isButtonDisabled = useMemo(
     () =>
+      !isSubmitting &&
       isValid &&
       (isPasswordAlreadySetup
         ? true
@@ -258,7 +259,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
             : true)
         ? false
         : true,
-    [isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword]
+    [isSubmitting, isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword]
   );
 
   const isCurrentStepUserPersonalization = profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION;
@@ -541,15 +542,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                 </div>
               </>
             )}
-            <Button
+            <Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              variant="primary"
+              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-              type="submit"
-              size="lg"
-              className="w-full"
-              disabled={isButtonDisabled}
-              loading={isSubmitting}
-            >
-              Continue
             </Button>
           </form>
         </div>