From c61dd50e603a3f27863785d615b356aa619ecbb9 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Fri, 20 Sep 2024 14:49:53 +0800
Subject: [PATCH] fix(experience): add missing button loading state (#6599)

---
 .../src/containers/SocialLinkAccount/index.tsx         | 10 ++++++++--
 .../src/hooks/use-webauthn-operation.ts                |  2 +-
 .../src/containers/SocialLinkAccount/index.tsx         | 10 ++++++++--
 .../experience/src/hooks/use-webauthn-operation.ts     |  2 +-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/experience-legacy/src/containers/SocialLinkAccount/index.tsx b/packages/experience-legacy/src/containers/SocialLinkAccount/index.tsx
index a297e7ee6..dfb70a3d1 100644
--- a/packages/experience-legacy/src/containers/SocialLinkAccount/index.tsx
+++ b/packages/experience-legacy/src/containers/SocialLinkAccount/index.tsx
@@ -1,6 +1,7 @@
 import { SignInIdentifier, SignInMode } from '@logto/schemas';
 import classNames from 'classnames';
 import type { TFuncKey } from 'i18next';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@/components/Button';
@@ -44,6 +45,8 @@ const SocialLinkAccount = ({ connectorId, className, relatedUser }: Props) => {
   const { signUpMethods, signInMode } = useSieMethods();
 
   const bindSocialRelatedUser = useBindSocialRelatedUser();
+  const [isBindingUser, setIsBindingUser] = useState(false);
+
   const registerWithSocial = useSocialRegister(connectorId);
 
   const actionText = getCreateAccountActionText(signUpMethods);
@@ -57,11 +60,14 @@ const SocialLinkAccount = ({ connectorId, className, relatedUser }: Props) => {
       <Button
         title="action.bind"
         i18nProps={{ address: type === 'email' ? maskEmail(value) : maskPhone(value) }}
-        onClick={() => {
-          void bindSocialRelatedUser({
+        isLoading={isBindingUser}
+        onClick={async () => {
+          setIsBindingUser(true);
+          await bindSocialRelatedUser({
             connectorId,
             ...(type === 'email' ? { email: value } : { phone: value }),
           });
+          setIsBindingUser(false);
         }}
       />
 
diff --git a/packages/experience-legacy/src/hooks/use-webauthn-operation.ts b/packages/experience-legacy/src/hooks/use-webauthn-operation.ts
index ff88eb22c..d91177037 100644
--- a/packages/experience-legacy/src/hooks/use-webauthn-operation.ts
+++ b/packages/experience-legacy/src/hooks/use-webauthn-operation.ts
@@ -67,7 +67,7 @@ const useWebAuthnOperation = () => {
         /**
          * Assert type manually to get the correct type
          */
-        void sendMfaPayload(
+        await sendMfaPayload(
           isAuthenticationResponseJSON(response)
             ? {
                 flow: UserMfaFlow.MfaVerification,
diff --git a/packages/experience/src/containers/SocialLinkAccount/index.tsx b/packages/experience/src/containers/SocialLinkAccount/index.tsx
index 5bc73f7bd..c3be352bf 100644
--- a/packages/experience/src/containers/SocialLinkAccount/index.tsx
+++ b/packages/experience/src/containers/SocialLinkAccount/index.tsx
@@ -1,6 +1,7 @@
 import { SignInIdentifier, SignInMode } from '@logto/schemas';
 import classNames from 'classnames';
 import type { TFuncKey } from 'i18next';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@/components/Button';
@@ -45,6 +46,8 @@ const SocialLinkAccount = ({ connectorId, verificationId, className, relatedUser
   const { signUpMethods, signInMode } = useSieMethods();
 
   const bindSocialRelatedUser = useBindSocialRelatedUser();
+  const [isBindingUser, setIsBindingUser] = useState(false);
+
   const registerWithSocial = useSocialRegister(connectorId);
 
   const actionText = getCreateAccountActionText(signUpMethods);
@@ -58,8 +61,11 @@ const SocialLinkAccount = ({ connectorId, verificationId, className, relatedUser
       <Button
         title="action.bind"
         i18nProps={{ address: type === 'email' ? maskEmail(value) : maskPhone(value) }}
-        onClick={() => {
-          void bindSocialRelatedUser(verificationId);
+        isLoading={isBindingUser}
+        onClick={async () => {
+          setIsBindingUser(true);
+          await bindSocialRelatedUser(verificationId);
+          setIsBindingUser(false);
         }}
       />
 
diff --git a/packages/experience/src/hooks/use-webauthn-operation.ts b/packages/experience/src/hooks/use-webauthn-operation.ts
index a809353b3..56585ad86 100644
--- a/packages/experience/src/hooks/use-webauthn-operation.ts
+++ b/packages/experience/src/hooks/use-webauthn-operation.ts
@@ -70,7 +70,7 @@ const useWebAuthnOperation = () => {
       /**
        * Assert type manually to get the correct type
        */
-      void sendMfaPayload(
+      await sendMfaPayload(
         isAuthenticationResponseJSON(response)
           ? {
               flow: UserMfaFlow.MfaVerification,