Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8ddc0f4
feat(settings): add loading state to save buttons
AMoreaux Apr 17, 2025
d640277
greptil
AMoreaux Apr 17, 2025
c0dd216
fix(loader): update fallback color to use CSS variable
AMoreaux Apr 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion ...wenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,27 @@ const StyledContainer = styled.div`

type SaveAndCancelButtonsProps = {
onSave?: () => void;
isLoading?: boolean;
onCancel?: () => void;
isSaveDisabled?: boolean;
isCancelDisabled?: boolean;
};

export const SaveAndCancelButtons = ({
onSave,
isLoading,
onCancel,
isSaveDisabled,
isCancelDisabled,
}: SaveAndCancelButtonsProps) => {
return (
<StyledContainer>
<CancelButton onCancel={onCancel} disabled={isCancelDisabled} />
<SaveButton onSave={onSave} disabled={isSaveDisabled} />
<SaveButton
onSave={onSave}
disabled={isSaveDisabled}
isLoading={isLoading}
/>
</StyledContainer>
);
};
8 changes: 7 additions & 1 deletion packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,14 @@ import { IconDeviceFloppy } from 'twenty-ui/display';
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`}
Expand All @@ -18,6 +23,7 @@ export const SaveButton = ({ onSave, disabled }: SaveButtonProps) => {
onClick={onSave}
type="submit"
Icon={IconDeviceFloppy}
isLoading={isLoading}
/>
);
};
7 changes: 6 additions & 1 deletion packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want this for Field creation as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Bonapara ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AMoreaux seems the ticket says Object & Field 🙂 twentyhq/core-team-issues#572

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is unnecessary to include it during field creation, as there is no loading time; the experience is immediate.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ?

const { t } = useLingui();
const navigate = useNavigateSettings();
const { enqueueSnackBar } = useSnackBar();

const [isLoading, setIsLoading] = useState(false);
const { createOneObjectMetadataItem } = useCreateOneObjectMetadataItem();

const formConfig = useForm<SettingsDataModelObjectAboutFormValues>({
Expand All @@ -43,6 +44,7 @@ export const SettingsNewObject = () => {
formValues: SettingsDataModelObjectAboutFormValues,
) => {
try {
setIsLoading(true);
const { data: response } = await createOneObjectMetadataItem(formValues);

navigate(
Expand All @@ -57,6 +59,8 @@ export const SettingsNewObject = () => {
enqueueSnackBar((error as Error).message, {
variant: SnackBarVariant.Error,
});
} finally {
setIsLoading(false);
}
};

Expand All @@ -79,6 +83,7 @@ export const SettingsNewObject = () => {
actionButton={
<SaveAndCancelButtons
isSaveDisabled={!canSave}
isLoading={isLoading}
isCancelDisabled={isSubmitting}
onCancel={() => navigate(SettingsPath.Objects)}
onSave={formConfig.handleSubmit(handleSave)}
Expand Down
4 changes: 2 additions & 2 deletions packages/twenty-ui/src/feedback/loader/components/Loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ const StyledLoaderContainer = styled.div<{
border-radius: ${({ theme }) => theme.border.radius.pill};
border: 1px solid
${({ color, theme }) =>
color ? theme.tag.text[color] : theme.font.color.tertiary};
color ? theme.tag.text[color] : `var(--tw-button-color)`};
overflow: hidden;
`;

const StyledLoader = styled(motion.div)<{
color?: ThemeColor;
}>`
background-color: ${({ color, theme }) =>
color ? theme.tag.text[color] : theme.font.color.tertiary};
color ? theme.tag.text[color] : `var(--tw-button-color)`};
border-radius: ${({ theme }) => theme.border.radius.pill};
height: 8px;
width: 8px;
Expand Down