try using setInterval

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

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/packages/fuselage-toastbar/src/ToastBarTimed.tsx b/packages/fuselage-toastbar/src/ToastBarTimed.tsx
@@ -15,35 +15,30 @@ const ToastBarTimed = ({
 
   const [hovering, setHovering] = useState(false);
 
-  const [timedOut, setTimedOut] = useState(false);
+  const visibleFor = time * 1000;
 
   useEffect(() => {
-    const timeOut = setTimeout(() => {
-      if (hovering) {
-        setTimedOut(true);
+    let elapsed = 0;
+
+    const interval = setInterval(() => {
+      if (elapsed >= visibleFor) {
+        dismissToastMessage(id);
         return;
       }
 
-      dismissToastMessage(id);
-    }, time * 1000);
+      if (!hovering) {
+        elapsed += 10;
+      }
+    }, 10);
 
-    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;
     }
   `;