fix: starting the toast timer when the promise is resolved

.changeset/slow-dogs-travel.md

@@ -3,3 +3,4 @@
 ---
 
 fixing maxVisibleToast functionality in toast (#4870)
+For promises, starting the timer only after the promise is resolved

packages/components/toast/src/use-toast.ts

@@ -195,9 +195,18 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
     }
   }, []);
 
+  const [isLoading, setIsLoading] = useState<boolean>(!!promiseProp);
+
+  useEffect(() => {
+    if (!promiseProp) return;
+    promiseProp.finally(() => {
+      setIsLoading(false);
+    });
+  }, [promiseProp]);
+
   useEffect(() => {
     const updateProgress = (timestamp: number) => {
-      if (!timeout) {
+      if (!timeout || isLoading) {
         return;
       }
 
@@ -240,16 +249,16 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
         cancelAnimationFrame(animationRef.current);
       }
     };
-  }, [timeout, shouldShowTimeoutProgess, state, isToastHovered, index, total, isRegionExpanded]);
-
-  const [isLoading, setIsLoading] = useState<boolean>(!!promiseProp);
-
-  useEffect(() => {
-    if (!promiseProp) return;
-    promiseProp.finally(() => {
-      setIsLoading(false);
-    });
-  }, [promiseProp]);
+  }, [
+    timeout,
+    shouldShowTimeoutProgess,
+    state,
+    isToastHovered,
+    index,
+    total,
+    isRegionExpanded,
+    isLoading,
+  ]);
 
   const Component = as || "div";
   const loadingIcon: ReactNode = icon;

packages/components/toast/stories/toast.stories.tsx

@@ -203,7 +203,9 @@ const PromiseToastTemplate = (args: ToastProps) => {
             addToast({
               title: "Toast Title",
               description: "Toast Displayed Successfully",
-              promise: new Promise((resolve) => setTimeout(resolve, 5000)),
+              promise: new Promise((resolve) => setTimeout(resolve, 3000)),
+              timeout: 3000,
+              shouldShowTimeoutProgess: false,
               ...args,
             });
           }}