fix: loading animation of update buttons (#13131)

* fixed loading animation of update buttons

* Update BookerLayoutSelector.tsx

* fix: update button animation in settings appearance page

* Update appearance.tsx

* Update appearance.tsx

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

apps/web/pages/settings/my-account/appearance.tsx

@@ -139,6 +139,9 @@ const AppearanceView = ({
         showToast(t("error_updating_settings"), "error");
       }
     },
+    onSettled: async () => {
+      await utils.viewer.me.invalidate();
+    },
   });
 
   return (
@@ -184,6 +187,7 @@ const AppearanceView = ({
         </div>
         <SectionBottomActions className="mb-6" align="end">
           <Button
+            loading={mutation.isPending}
             disabled={isUserThemeSubmitting || !isUserThemeDirty}
             type="submit"
             data-testid="update-theme-btn"
@@ -210,6 +214,7 @@ const AppearanceView = ({
           title={t("bookerlayout_user_settings_title")}
           description={t("bookerlayout_user_settings_description")}
           isDisabled={isBookerLayoutFormSubmitting || !isBookerLayoutFormDirty}
+          isLoading={mutation.isPending}
         />
       </Form>
 
@@ -295,6 +300,7 @@ const AppearanceView = ({
             </div>
             <SectionBottomActions align="end">
               <Button
+                loading={mutation.isPending}
                 disabled={isBrandColorsFormSubmitting || !isBrandColorsFormDirty}
                 color="primary"
                 type="submit">

packages/features/settings/BookerLayoutSelector.tsx

@@ -31,7 +31,7 @@ type BookerLayoutSelectorProps = {
    * to this boolean.
    */
   isDark?: boolean;
-
+  isLoading?: boolean;
   isDisabled?: boolean;
   isOuterBorder?: boolean;
 };
@@ -46,6 +46,7 @@ export const BookerLayoutSelector = ({
   isDark,
   isDisabled = false,
   isOuterBorder = false,
+  isLoading = false,
 }: BookerLayoutSelectorProps) => {
   const { control, getValues } = useFormContext();
   const { t } = useLocale();
@@ -79,7 +80,7 @@ export const BookerLayoutSelector = ({
             />
             {!isOuterBorder && (
               <SectionBottomActions align="end">
-                <Button type="submit" disabled={isDisabled} color="primary">
+                <Button loading={isLoading} type="submit" disabled={isDisabled} color="primary">
                   {t("update")}
                 </Button>
               </SectionBottomActions>