[bug]: Browser freeze with prop change in nested animations

[remiremi]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.4.2

What's Wrong?

I have an animated loop rotating a container, contained in an animated loop moving the container.

The animation sometimes randomly freezes the browser, which prompts me to stop the webpage.The console indicates the script got stopped in the flushUpdate method.

To Reproduce

See codesandbox. Doesn't freeze every time, but if you click the box a couple of times it should freeze.

I think the root cause is that there is an outer animation, with an inner animation that has a loop. I tried splitting the animated.div component in two separate nested components, one for the translation and one for the rotation, but the result is the same: browser ends up freezing.

Tried on Firefox only.

Expected Behaviour

Browser should never freeze.

Link to repo

https://codesandbox.io/s/interesting-raman-p8y5j?file=/src/index.js

[ClishWang]

I have the same problem，when the "document.hidden = true" animations will blocked. countdown behavior to be confused.

[joshuaellis]

I think this is related to #1882

[Lonli-Lokli]

So if it's reproduced - can it be fixed?

[joshuaellis]

When someone has the time to look, sure!