feat(settings): add loading state to save buttons (#11639)

Introduce a loading state to SaveButton and SaveAndCancelButtons
components to enhance user feedback during save operations. Update
SettingsNewObject to manage the loading state while submitting the form.

Fix https://github.com/twentyhq/core-team-issues/issues/572

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx

@@ -11,6 +11,7 @@ const StyledContainer = styled.div`
 
 type SaveAndCancelButtonsProps = {
   onSave?: () => void;
+  isLoading?: boolean;
   onCancel?: () => void;
   isSaveDisabled?: boolean;
   isCancelDisabled?: boolean;
@@ -18,6 +19,7 @@ type SaveAndCancelButtonsProps = {
 
 export const SaveAndCancelButtons = ({
   onSave,
+  isLoading,
   onCancel,
   isSaveDisabled,
   isCancelDisabled,
@@ -25,7 +27,11 @@ export const SaveAndCancelButtons = ({
   return (
     <StyledContainer>
       <CancelButton onCancel={onCancel} disabled={isCancelDisabled} />
-      <SaveButton onSave={onSave} disabled={isSaveDisabled} />
+      <SaveButton
+        onSave={onSave}
+        disabled={isSaveDisabled}
+        isLoading={isLoading}
+      />
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx

@@ -1,13 +1,18 @@
 import { t } from '@lingui/core/macro';
-import { Button } from 'twenty-ui/input';
 import { IconDeviceFloppy } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 
 type SaveButtonProps = {
   onSave?: () => void;
   disabled?: boolean;
+  isLoading?: boolean;
 };
 
-export const SaveButton = ({ onSave, disabled }: SaveButtonProps) => {
+export const SaveButton = ({
+  onSave,
+  disabled,
+  isLoading,
+}: SaveButtonProps) => {
   return (
     <Button
       title={t`Save`}
@@ -18,6 +23,7 @@ export const SaveButton = ({ onSave, disabled }: SaveButtonProps) => {
       onClick={onSave}
       type="submit"
       Icon={IconDeviceFloppy}
+      isLoading={isLoading}
     />
   );
 };