React-spring: useTransition fails to unmount when minimized/tabbed out

[nudabagana]

🐛 Bug Report

So we are using useTransition to animate entrance and exit of rows in a table. Those items come from websockets. It all seems to work fine at first sight. But if you go to other tab for longer period of time (2 hours+), or minimize window, when you come back, you see a lot of items stuck in table, after finishing exit animation. Rows are shown in table even though they are no longer in react state.
Any way to fix this issue or at least detect stuck items (when they are no longer in react state).

To Reproduce

Make animations happen in tabbed out/minimized window after keeping it minimized for 2h+.

Expected behavior

Animations should happen even when window is tabbed out/minimized and not get stuck.

Link to repro (highly encouraged)

Codepen link: https://codesandbox.io/s/interesting-heisenberg-f4vdk
1) Open codepen, open "React DevTools", select App, so you would see it's state.
2) minimize/go to other tab for 3-5mins.
3) Go back to codepen.
4) You should see something like this (https://i.imgur.com/hkOWrDf.png). Lots of duplicated items, that should'ev exited. However they won't be inside react state.

• You may also see react duplicate key errors, since duplicate items appear in react DOM.
  ** This is not identical representation, since it usses SetInterval (instead of ws) which gets throttled when tabbed out. But in both cases, you get the same problem.

  Environment

• react-spring 8.0.27

• react 16.8.6

[aleclarson]

Not something we control. See here: https://stackoverflow.com/questions/15871942/how-do-browsers-pause-change-javascript-when-tab-or-window-is-not-active

[aleclarson]

Although, useTransition should be unmounting items after leave animation. 🤔

[nudabagana]

I will try to make a reproduction with SetInterval randomly adding/removing items every few secs and leaving tab in the background.

[nudabagana]

I updated original post with codepen link (https://codesandbox.io/s/interesting-heisenberg-f4vdk). Read it for full description on bug reproduction.

[aleclarson]

You can use the visibilitychange API to disable animations.

Something like this:

import {Globals} from 'react-spring'
document.addEventListener('visibilitychange', () => {
  Globals.assign({ skipAnimation: document.visibilityState !== 'visible' })
})

Note: This only works in v9+

It should probably be baked into the @react-spring/web package. I'll make sure it's in the next canary version.

For now, that fix doesn't work though, since there's a bug with the skipAnimation global and onRest prop. I'll fix that for the next canary, too.

[nudabagana]

Great to hear! Gonna be waiting for next release :)

[GoldenD]

This bug is also present in example https://codesandbox.io/embed/morr206pv8 and subsequently in page https://www.react-spring.io/docs/hooks/examples when said example is loaded (scrolled down).

This bug causes the page to slow to a crawl when tabbing in due to increasing amount of unmounted components.

Currently updating to v9 in itself does not solve the issue

[aleclarson]

Fixed in 9.0.0-rc.2 (#985)