[bug]: exitBeforeEnter removes elements on browser tab change

[yaroslavdraha]

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.5.2

What's Wrong?

I'm experiencing a problem using useTransition and exitBeforeEnter.

My goal is to show two blocks and change them with a timeout (check the sandbox). For some reason, the animated components are gone when I change the tab in the browser for around 5 sec. I cannot reproduce that without exitBeforeEnter.

To Reproduce

• Open Codesandbox
• See that animation works as expected (blocks are changing with after 2 sec)
• Change browser tab for 5 sec
• Go back to the codesandbox
• See that animated components are gone from DOMthe

Expected Behaviour

• Animated components are still in the DOM

Link to repo

https://codesandbox.io/s/exitbeforeenter-removes-components-on-browser-tab-change-krs5jo

[karenbanci]

Hello, I would like to know if someone was be able to fix this bug, or if there is any workaround. I have the same problem, but I can't fix it.

[jahd2602]

I found a workaround: Add if (document.hidden) return; as the first line of the setInterval function, like this:

[yaroslavdraha]

Hi guys I wasn't able to fix that and used react-transition-group for that particular type of animation

[jahd2602]

@pmndrs any hint on how to find this issue in react-spring code? I've been looking at https://github.com/pmndrs/react-spring/blob/main/packages/core/src/hooks/useTransition.tsx and exitBeforeEnter usages, but can't find anything that could be related with leaving the current tab (hidden document)

[joshuaellis]

Don't tag the whole organisation @jahd2602. There's no handling of the hidden document.

[karenbanci]

Why jahd2602's comment was deleted?