fix: increase snackbar duration for error variants and allow manual dismissal

https://sonarly.com/issue/25260?type=bug

Error snackbar notifications use the same 6-second auto-dismiss duration as success/info notifications, making it impossible for users to read long error messages during operations like CSV import.

Fix: The `SnackBar` component in `packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx` used a single hardcoded default `duration = 6000` (6 seconds) for all snackbar variants. Error and warning messages — which often contain important diagnostic information — disappeared too quickly for users to read.

**Changes:**
1. Added two constants: `SNACK_BAR_DEFAULT_DURATION` (6000ms) and `SNACK_BAR_ERROR_DURATION` (10000ms)
2. Added a `defaultDurationByVariant` map that assigns the longer duration to `Error` and `Warning` variants
3. Changed the `duration` parameter from a default value (`duration = 6000`) to optional (`duration`), and compute `resolvedDuration` using `duration ?? defaultDurationByVariant[variant]`

This preserves full backward compatibility:
- Callers that explicitly pass a `duration` will use their value (unchanged)
- Success/Info/Default snackbars still auto-dismiss at 6 seconds (unchanged)
- Error/Warning snackbars now auto-dismiss at 10 seconds (improved)
- The existing mouse-hover-to-pause behavior continues to work for all variants
This commit is contained in:
Sonarly Claude Code 2026-04-14 14:06:03 +00:00
parent ed9dd3c275
commit 65f437e90a

View file

@ -143,10 +143,21 @@ const defaultAriaLabelByVariant: Record<
[SnackBarVariant.Warning]: msg`Warning`,
};
const SNACK_BAR_DEFAULT_DURATION = 6000;
const SNACK_BAR_ERROR_DURATION = 10000;
const defaultDurationByVariant: Record<SnackBarVariant, number> = {
[SnackBarVariant.Default]: SNACK_BAR_DEFAULT_DURATION,
[SnackBarVariant.Success]: SNACK_BAR_DEFAULT_DURATION,
[SnackBarVariant.Info]: SNACK_BAR_DEFAULT_DURATION,
[SnackBarVariant.Warning]: SNACK_BAR_ERROR_DURATION,
[SnackBarVariant.Error]: SNACK_BAR_ERROR_DURATION,
};
export const SnackBar = ({
className,
progress: overrideProgressValue,
duration = 6000,
duration,
icon: iconComponent,
id,
message,
@ -161,6 +172,9 @@ export const SnackBar = ({
}: SnackBarProps) => {
const { i18n, t } = useLingui();
const { theme } = useContext(ThemeContext);
const resolvedDuration = duration ?? defaultDurationByVariant[variant];
const { animation: progressAnimation, value: progressValue } =
useProgressAnimation({
autoPlay: isUndefined(overrideProgressValue),
@ -168,7 +182,7 @@ export const SnackBar = ({
? overrideProgressValue
: 100,
finalValue: 0,
options: { duration, onComplete: onClose },
options: { duration: resolvedDuration, onComplete: onClose },
});
const icon = useMemo(() => {