try using setInterval

RocketChat · Jun 25, 2024 · 4329652 · 4329652
1 parent 9b393b0
commit 4329652
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
@@ -15,35 +15,29 @@ const ToastBarTimed = ({
 
   const [hovering, setHovering] = useState(false);
 
-  const [timedOut, setTimedOut] = useState(false);
+  const visibleFor = time * 1000;
 
   useEffect(() => {
-    const timeOut = setTimeout(() => {
+    const start = Date.now();
+
+    const interval = setInterval(() => {
       if (hovering) {
-        setTimedOut(true);
         return;
       }
 
-      dismissToastMessage(id);
-    }, time * 1000);
+      if (Date.now() - start >= visibleFor) {
+        dismissToastMessage(id);
+      }
+    }, 100);
 
-    return () => clearTimeout(timeOut);
+    return () => clearTimeout(interval);
   }, [hovering]);
 
-  const onMouseLeave = () => {
-    if (timedOut) {
-      dismissToastMessage(id);
-      return;
-    }
-
-    setHovering(false);
-  };
-
   return (
     <ToastBar
       variant={type}
       onMouseEnter={() => setHovering(true)}
-      onMouseLeave={onMouseLeave}
+      onMouseLeave={() => setHovering(false)}
       children={message}
       onClose={dismissToastMessage}
       id={id}

diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.tsx
@@ -59,6 +59,7 @@ export function ToastBar({
     &::after {
       width: 0%;
       animation: ${progressBar} ${time}s;
+      animation-fill-mode: forwards;
     }
   `;