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>

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>

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>

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" />