luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix animation glitch

Browse Source
This commit is contained in:
Thomas Nordquist
2019-07-07 12:59:30 +02:00
parent 183ea9d8c0
commit 6bead5b5a6
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx
View File

@@ -9,20 +9,21 @@ export function useAnimationToIndicateTopicUpdate(
) { ) {
useEffect(() => { useEffect(() => {
if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected) { if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected) {
let timeout: any
let animationFrame = requestAnimationFrame(() => { let animationFrame = requestAnimationFrame(() => {
ref.current && ref.current.classList.add(className) ref.current && ref.current.classList.add(className)
})
const timeout = setTimeout( timeout = setTimeout(
() => () =>
(animationFrame = requestAnimationFrame(() => { (animationFrame = requestAnimationFrame(() => {
ref.current && ref.current.classList.remove(className) ref.current && ref.current.classList.remove(className)
})), })),
500 500
) )
})
return function cleanup() { return function cleanup() {
clearTimeout(timeout) timeout && clearTimeout(timeout)
animationFrame && cancelAnimationFrame(animationFrame) animationFrame && cancelAnimationFrame(animationFrame)
} }
} }