fix: UTC-569: Toast 'Annotation saved successfully' does not auto-dismiss and persists across page navigation (#9380)

Author: nass600

web/libs/ui/src/lib/toast/toast.tsx

@@ -1,4 +1,4 @@
-import { createContext, type FC, type ReactNode, useCallback, useContext, useState, useRef } from "react";
+import { createContext, type FC, type ReactNode, useCallback, useContext, useState } from "react";
 import * as ToastPrimitive from "@radix-ui/react-toast";
 import styles from "./toast.module.scss";
 import clsx from "clsx";
@@ -119,7 +119,6 @@ export const useToast = () => {
 
 export const ToastProvider: FC<ToastProviderWithTypes> = ({ swipeDirection = "down", children, type, ...props }) => {
   const [toastMessage, setToastMessage] = useState<ToastShowArgs | null>();
-  const timerRef = useRef<NodeJS.Timeout>();
 
   const defaultDuration = 4000;
   const duration = toastMessage?.duration ?? defaultDuration;
@@ -130,20 +129,21 @@ export const ToastProvider: FC<ToastProviderWithTypes> = ({ swipeDirection = "do
       if (id && current.id !== id) return current;
       return null;
     });
-    if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
 
-  const show = ({ message, type, duration = defaultDuration, id }: ToastShowArgs) => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-
+  const show = useCallback(({ message, type, duration = defaultDuration, id }: ToastShowArgs) => {
     const toastId = id ?? nanoid();
     setToastMessage({ message, type, duration, id: toastId });
+    return toastId;
+  }, []);
 
-    if (duration >= 0) {
-      timerRef.current = setTimeout(() => dismiss(toastId), duration);
+  // Handle Radix UI's onOpenChange to sync when toast closes
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      setToastMessage(null);
     }
-    return toastId;
-  };
+  }, []);
+
   const toastType = toastMessage?.type ?? type ?? ToastType.info;
   return (
     <ToastContext.Provider value={{ show, dismiss }}>
@@ -155,6 +155,8 @@ export const ToastProvider: FC<ToastProviderWithTypes> = ({ swipeDirection = "do
             [styles.messageToast_alertError]: toastType === ToastType.alertError,
           })}
           open={!!toastMessage?.message}
+          onOpenChange={handleOpenChange}
+          duration={duration}
           action={
             <ToastAction onClose={() => setToastMessage(null)} altText="x">
               <IconCross />