[BUG]:Time Zone Update Toast , Not disappear ...

When I update the time zone on cal.com, it will show the toast in the bottom center, but it is stuck on the screen and does not disappear.
For ref -
https://www.loom.com/share/4ed8779d814949f08da941d9b0d5cd44

To fix the issue where the toast notification for time zone updates remains on the screen and does not disappear, you should adjust the showToast function calls to include a duration parameter, ensuring the toast is automatically dismissed after a set time. For example, in the onSuccessMutation and onErrorMutation functions, you can specify the toast to disappear after 5 seconds (5000 milliseconds) like so:

const onSuccessMutation = async () => {
  showToast(t("updated_timezone_to", { formattedCurrentTz }), "success", 5000);
  await utils.viewer.me.invalidate();
};

const onErrorMutation = () => {
  showToast(t("couldnt_update_timezone"), "error", 5000);
};

This assumes the showToast function supports a duration parameter or a similar mechanism for auto-hiding. If showToast does not have this feature, you may need to refer to the @calcom/ui documentation or consider a custom implementation for toast notifications that includes auto-hide functionality. Check the implementation in the TimezoneChangeDialog.tsx file and the showToast function in the cal.com repository for more details.

Details

Sources

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

Hi @PeerRich , is anyone working on this bug? If not, could it be assigned to me?

@PeerRich the default TOAST visible duration is define so it should be an issue here i can see, seems to be some browser or dom related issue?

cal.com/packages/ui/components/toast/showToast.tsx

Lines 78 to 87 in 5c2b561

    
           const TOAST_VISIBLE_DURATION = 6000; 
        
           type ToastVariants = "success" | "warning" | "error"; 
        
           export function showToast( 
        
             message: string, 
        
             variant: ToastVariants, 
        
             // Options or duration (duration for backwards compatibility reasons) 
        
             options: number | ToastOptions = TOAST_VISIBLE_DURATION 
        
           ) {

@raza001 can you please share the issue in more details and process how the issue occurs? and reproduced steps.

I think it is a browser issue; it is working fine on Incognito
Pls , decrease TOAST_VISIBLE_DURATION

thanks @raza001 for the confirmation, but i guess 6 sec is normal time for a Toast.

	const TOAST_VISIBLE_DURATION = 6000;

	type ToastVariants = "success" \| "warning" \| "error";

	export function showToast(
	message: string,
	variant: ToastVariants,
	// Options or duration (duration for backwards compatibility reasons)
	options: number \| ToastOptions = TOAST_VISIBLE_DURATION
	) {