File size: 1,104 Bytes
b91e262 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import { useEffect, useRef, useState } from 'react'
export function useUpdateAnimation(
issueCount: number,
animationDurationMs = 0
) {
const lastUpdatedTimeStamp = useRef<number | null>(null)
const [animate, setAnimate] = useState(false)
useEffect(() => {
if (issueCount > 0) {
const deltaMs = lastUpdatedTimeStamp.current
? Date.now() - lastUpdatedTimeStamp.current
: -1
lastUpdatedTimeStamp.current = Date.now()
// We don't animate if `issueCount` changes too quickly
if (deltaMs <= animationDurationMs) {
return
}
setAnimate(true)
// It is important to use a CSS transitioned state, not a CSS keyframed animation
// because if the issue count increases faster than the animation duration, it
// will abruptly stop and not transition smoothly back to its original state.
const timeoutId = window.setTimeout(() => {
setAnimate(false)
}, animationDurationMs)
return () => {
clearTimeout(timeoutId)
}
}
}, [issueCount, animationDurationMs])
return animate
}
|