From 6bead5b5a6d4573d9c719ac338e34af36a621067 Mon Sep 17 00:00:00 2001 From: Thomas Nordquist Date: Sun, 7 Jul 2019 12:59:30 +0200 Subject: [PATCH] Fix animation glitch --- .../useAnimationToIndicateTopicUpdate.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx b/app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx index 5fe8fa0..aba1811 100644 --- a/app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx +++ b/app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx @@ -9,20 +9,21 @@ export function useAnimationToIndicateTopicUpdate( ) { useEffect(() => { if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected) { + let timeout: any let animationFrame = requestAnimationFrame(() => { ref.current && ref.current.classList.add(className) + + timeout = setTimeout( + () => + (animationFrame = requestAnimationFrame(() => { + ref.current && ref.current.classList.remove(className) + })), + 500 + ) }) - const timeout = setTimeout( - () => - (animationFrame = requestAnimationFrame(() => { - ref.current && ref.current.classList.remove(className) - })), - 500 - ) - return function cleanup() { - clearTimeout(timeout) + timeout && clearTimeout(timeout) animationFrame && cancelAnimationFrame(animationFrame) } }