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

@@ -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>

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>

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>

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")}

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>