From 59ea4d624ba684b286de312632abd2f1ec0b7543 Mon Sep 17 00:00:00 2001
From: Monto <138862352+monto7926@users.noreply.github.com>
Date: Tue, 8 Aug 2023 22:32:22 +0300
Subject: [PATCH] feat: add loading state for buttons on settings page (#10643)

* fix: add spinner to general settings section

* feat: add and manage spinner in the emptyScreen component

* feat: add spinner to two-factor auth modal buttons

* feat: add spinner to password and impersonation setting buttons

* feat: add spinner to webhookform(edit and create)

* chore: clean up code

---------

Co-authored-by: lemmyMwaura <lemmymwauracodes@gmail.com>
---
 apps/web/components/settings/DisableTwoFactorModal.tsx | 7 ++++++-
 apps/web/components/settings/EnableTwoFactorModal.tsx  | 8 +++++++-
 apps/web/pages/settings/security/impersonation.tsx     | 7 ++++++-
 apps/web/pages/settings/security/password.tsx          | 1 +
 packages/features/webhooks/components/WebhookForm.tsx  | 6 ++++--
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/apps/web/components/settings/DisableTwoFactorModal.tsx b/apps/web/components/settings/DisableTwoFactorModal.tsx
index cbf02dbe80..385e775f32 100644
--- a/apps/web/components/settings/DisableTwoFactorModal.tsx
+++ b/apps/web/components/settings/DisableTwoFactorModal.tsx
@@ -94,7 +94,12 @@ const DisableTwoFactorAuthModal = ({
             <Button color="secondary" onClick={onCancel}>
               {t("cancel")}
             </Button>
-            <Button type="submit" className="me-2 ms-2" data-testid="disable-2fa" disabled={isDisabling}>
+            <Button
+              type="submit"
+              className="me-2 ms-2"
+              data-testid="disable-2fa"
+              loading={isDisabling}
+              disabled={isDisabling}>
               {t("disable")}
             </Button>
           </DialogFooter>
diff --git a/apps/web/components/settings/EnableTwoFactorModal.tsx b/apps/web/components/settings/EnableTwoFactorModal.tsx
index 00e4cc1889..099558a8af 100644
--- a/apps/web/components/settings/EnableTwoFactorModal.tsx
+++ b/apps/web/components/settings/EnableTwoFactorModal.tsx
@@ -194,6 +194,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
                 type="submit"
                 className="me-2 ms-2"
                 onClick={handleSetup}
+                loading={isSubmitting}
                 disabled={password.length === 0 || isSubmitting}>
                 {t("continue")}
               </Button>
@@ -208,7 +209,12 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
               </Button>
             </WithStep>
             <WithStep step={SetupStep.EnterTotpCode} current={step}>
-              <Button type="submit" className="me-2 ms-2" data-testid="enable-2fa" disabled={isSubmitting}>
+              <Button
+                type="submit"
+                className="me-2 ms-2"
+                data-testid="enable-2fa"
+                loading={isSubmitting}
+                disabled={isSubmitting}>
                 {t("enable")}
               </Button>
             </WithStep>
diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx
index 67b3b8c74c..fbe31be02b 100644
--- a/apps/web/pages/settings/security/impersonation.tsx
+++ b/apps/web/pages/settings/security/impersonation.tsx
@@ -79,7 +79,12 @@ const ProfileImpersonationView = () => {
             </Skeleton>
           </div>
         </div>
-        <Button color="primary" className="mt-8" type="submit" disabled={isDisabled}>
+        <Button
+          color="primary"
+          loading={mutation.isLoading}
+          className="mt-8"
+          type="submit"
+          disabled={isDisabled}>
           {t("update")}
         </Button>
       </Form>
diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx
index b73802bed5..6da897b430 100644
--- a/apps/web/pages/settings/security/password.tsx
+++ b/apps/web/pages/settings/security/password.tsx
@@ -199,6 +199,7 @@ const PasswordView = () => {
             color="primary"
             className="mt-8"
             type="submit"
+            loading={passwordMutation.isLoading || sessionMutation.isLoading}
             onClick={() => formMethods.clearErrors("apiError")}
             disabled={isDisabled || passwordMutation.isLoading || sessionMutation.isLoading}>
             {t("update")}
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index 6c995d5435..3f34feabb8 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -95,7 +95,7 @@ const WebhookForm = (props: {
     if (changeSecret) {
       formMethods.unregister("secret", { keepDefaultValue: false });
     }
-  }, [changeSecret]);
+  }, [changeSecret, formMethods]);
 
   return (
     <>
@@ -277,7 +277,9 @@ const WebhookForm = (props: {
             {...(!props.onCancel ? { href: `${WEBAPP_URL}/settings/developer/webhooks` } : {})}>
             {t("cancel")}
           </Button>
-          <Button type="submit" loading={formMethods.formState.isSubmitting}>
+          <Button
+            type="submit"
+            loading={formMethods.formState.isSubmitting || formMethods.formState.isSubmitted}>
             {props?.webhook?.id ? t("save") : t("create_webhook")}
           </Button>
         </DialogFooter>