From b1d31613d9d335253e6dc0e7767450568bc4701c Mon Sep 17 00:00:00 2001
From: murtaza030 <50249571+murtaza030@users.noreply.github.com>
Date: Tue, 19 Mar 2024 19:23:37 +0500
Subject: [PATCH] style: Provide Visual Feedback to Users Upon Button Click to
 Indicate Processing Time #13553 (#14137)

* Update UserSettings.tsx

i am trying to solve Processing button

* chore: use loading property and undo changes

* chore: add in other pages

---------

Co-authored-by: Udit Takkar <udit222001@gmail.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
---
 .../getting-started/steps-views/SetupAvailability.tsx       | 1 +
 .../components/getting-started/steps-views/UserProfile.tsx  | 6 +++++-
 .../components/getting-started/steps-views/UserSettings.tsx | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
index e895a862e7..5ee3cca96a 100644
--- a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
+++ b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
@@ -76,6 +76,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
           data-testid="save-availability"
           type="submit"
           className="mt-2 w-full justify-center p-2 text-sm sm:mt-8"
+          loading={availabilityForm.formState.isSubmitting}
           disabled={availabilityForm.formState.isSubmitting}>
           {t("next_step_text")} <ArrowRight className="ml-2 h-4 w-4 self-center" />
         </Button>
diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx
index 6cc5c5480d..5c7a0de3b8 100644
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@@ -145,7 +145,11 @@ const UserProfile = () => {
         />
         <p className="text-default mt-2 font-sans text-sm font-normal">{t("few_sentences_about_yourself")}</p>
       </fieldset>
-      <Button EndIcon={ArrowRight} type="submit" className="mt-8 w-full items-center justify-center">
+      <Button
+        loading={mutation.isPending}
+        EndIcon={ArrowRight}
+        type="submit"
+        className="mt-8 w-full items-center justify-center">
         {t("finish")}
       </Button>
     </form>
diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx
index f74d011c57..1d1aa34cf9 100644
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@@ -113,6 +113,7 @@ const UserSettings = (props: IUserSettingsProps) => {
       <Button
         type="submit"
         className="mt-8 flex w-full flex-row justify-center"
+        loading={mutation.isPending}
         disabled={mutation.isPending}>
         {t("next_step_text")}
         <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />