From 59c59389fb53ef10812f37a45f468b02d613d53d Mon Sep 17 00:00:00 2001
From: Maharshi Alpesh <maharshialpesh@gmail.com>
Date: Fri, 21 Feb 2025 12:57:11 +0530
Subject: [PATCH] fix: starting the toast timer when the promise is resolved

---
 .changeset/slow-dogs-travel.md                |  1 +
 packages/components/toast/src/use-toast.ts    | 31 ++++++++++++-------
 .../toast/stories/toast.stories.tsx           |  4 ++-
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/.changeset/slow-dogs-travel.md b/.changeset/slow-dogs-travel.md
index 048b8c00fc..3e8f436589 100644
--- a/.changeset/slow-dogs-travel.md
+++ b/.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
diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
index 9d022b46b2..d52e309001 100644
--- a/packages/components/toast/src/use-toast.ts
+++ b/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;
diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx
index 586be77fb3..1f6cca2c54 100644
--- a/packages/components/toast/stories/toast.stories.tsx
+++ b/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,
             });
           }}