useTransition does not run "leave" transition when delay is set

[camurai]

🐛 Bug Report

the useTransition hook does not run the "leave" transition if a delay is set. This can be seen in action on the "Toggle between components" example in the documentation for useTransition here: useTransition Documentation

The emoji abruptly disappears before the new one fades in, instead of slowly fading out as intended.

To Reproduce

copy the "Toggle between components" example from useTransition Documentation

Code Sandbox: https://codesandbox.io/s/zealous-wiles-tehw6?file=/src/App.js

if you remove the delay setting, the two will fade in and out as expected (though of course without the delay)

Expected behavior

smooth animated transition between the two components including a fade out.

Environment

• react-spring v9.2.4
• react v17.0.2

[joshuaellis]

Thanks for the report! I would ask that you provide a minimal code sandbox example for us to review the bug. Thanks!

[camurai]

code sandbox added. https://codesandbox.io/s/zealous-wiles-tehw6?file=/src/App.js

[Aaron-Storm]

Is there any update in this regard or any information if this bug will be fixed soon as otherwise I will have to find a workaround for the time being. The bug affects every "leave" transition and is pretty obvious in every example shown in the docs. Thanks for your time.

[joshuaellis]

@Aaron-Storm respectfully, I think you're under the illusion there are a team of developers maintaining react-spring day to day, unfortunately, this is simply not the case. We rely on a community to fix bugs in OSS, i have a full-time job and do this on the side when I have time, sadly recently I haven't had this time as i have a few large projects on at work that require my full attention during and out of hours.

However, I am more than happy to support other people provide fixes for the issues they face, including yourself, as this just requires me sharing knowledge & writing.

[Aaron-Storm]

@joshuaellis My apologies, I did not mean to come over as disrespectful. I was just wondering if there is any update just so I know if it's worth spending time to find another workaround.
Thanks for the clarification though and again thanks for your time. Much appreciated.

[joshuaellis]

@joshuaellis My apologies, I did not mean to come over as disrespectful. I was just wondering if there is any update just so I know if it's worth spending time to find another workaround.

Thanks for the clarification though and again thanks for your time. Much appreciated.

No worries, like i said, you might have better luck solving the issue as opposed to looking for a workaround 🥸

[AndriesVDW]

It seems like 9.2.0-beta.4 is the update that breaks it. It still works properly in 9.2.0-beta.3.

Edit: Since there are not a lot of changes between these 2 versions, I'm guessing the bug should be somewhere in here.

[joshuaellis]

It seems like 9.2.0-beta.4 is the update that breaks it. It still works properly in 9.2.0-beta.3.

Thanks for this, this will be helpful for anyone looking to solve the issue ⭐

[AndriesVDW]

When removing propsDelay from this line, the transition works the way it did before.

When I change the version of the example to 9.0.0 and increase the delay to say, 5000, it ignores the delay. Did this ever work?

I know this doesn't really fix it, but maybe this will be helpfull to someone as well.

Edit: For now, maybe we could remove the propsDelay part? The delay would still be broken (like it was before?) but at least the animations would work again.