Countdown stops counting when the tab is not active

[mehdifracso]

If the countdown starts on a tab and you switch to another in the browser, it stops counting.

This behaviour is seen on chrome.

I tried it also in edge, it also stops counting there but accelerates when the tab is active to reach the count where it should be.

[alexkuc]

I think it is due to use of window.requestAnimationFrame under the hood. I could be wrong but I think it is due to better animations with window.requestAnimationFrame, e.g. SO example.

[darrenfurr]

Any thoughts on a solution/workaround on this one? I get maximum callstack size exceeded when the animation "resumes" when I calc duration/progress.

I'm setting duration & progress in a useEffect off the timeLeftMs...

  useEffect(() => {
    setDuration(timeLeftMs > 0 ? intervalToDuration({ start: 0, end: timeLeftMs }) : undefined);
    // progress 100 to 0
    setProgress(timeLeftMs <= threshold ? Math.round((timeLeftMs / threshold) * 100) : 0);
  }, [timeLeftMs, threshold]);