feat(settings): add loading state to save buttons #11639
Conversation
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.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Added loading state functionality to save buttons in the settings pages to provide better user feedback during form submissions.
- Added
isLoadingstate management inpackages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsxto handle API call states - Implemented
isLoadingprop inpackages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsxfor visual feedback - Extended
SaveAndCancelButtonscomponent to propagate loading state to child components
3 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile
packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
Outdated
Show resolved
Hide resolved
...s/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx
Show resolved
Hide resolved
Screen.Recording.2025-04-17.at.18.43.46.mov |
| @@ -19,12 +19,13 @@ import { useNavigateSettings } from '~/hooks/useNavigateSettings'; | |||
| import { getSettingsPath } from '~/utils/navigation/getSettingsPath'; | |||
| import { H2Title } from 'twenty-ui/display'; | |||
| import { Section } from 'twenty-ui/layout'; | |||
| import { useState } from 'react'; | |||
|
|
|||
| export const SettingsNewObject = () => { | |||
There was a problem hiding this comment.
Do we want this for Field creation as well?
There was a problem hiding this comment.
@AMoreaux seems the ticket says Object & Field 🙂 twentyhq/core-team-issues#572
There was a problem hiding this comment.
It is unnecessary to include it during field creation, as there is no loading time; the experience is immediate.
There was a problem hiding this comment.
Field takes time to appear after redirect, maybe we prefer to have a similar experience than object creation and wait for creation completion before redirection. Wdyt @charlesBochet ?
Discussed offline, we will fix it in another PR since this one is simply reusing the existing component (FYI @charlesBochet) |
Replaced the tertiary font color fallback with a CSS variable (--tw-button-color) for better consistency with the design system and theming. Ensures more predictable and customizable styling.
The issue is about the space between the ellipsis and the letter S. |
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 twentyhq/core-team-issues#572