From 034318e571b36e0ce85868319e62cfb1c4bc7d5d Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Fri, 15 Mar 2024 16:28:08 +0800
Subject: [PATCH] fix: add passkey loading

---
 apps/web/src/components/forms/signin.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 5a0770dec..2f67d4a4d 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -83,6 +83,8 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     'totp' | 'backup'
   >('totp');
 
+  const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
+
   const isPasskeyEnabled = getFlag('app_passkey');
 
   const { mutateAsync: createPasskeySigninOptions } =
@@ -134,6 +136,8 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     }
 
     try {
+      setIsPasskeyLoading(true);
+
       const options = await createPasskeySigninOptions();
 
       const credential = await startAuthentication(options);
@@ -150,6 +154,8 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
 
       window.location.href = result.url;
     } catch (err) {
+      setIsPasskeyLoading(false);
+
       if (err.name === 'NotAllowedError') {
         return;
       }
@@ -334,11 +340,12 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             type="button"
             size="lg"
             variant="outline"
-            loading={isSubmitting}
+            disabled={isSubmitting}
+            loading={isPasskeyLoading}
             className="bg-background text-muted-foreground border"
             onClick={onSignInWithPasskey}
           >
-            <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />
+            {!isPasskeyLoading && <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />}
             Passkey
           </Button>
         )}