search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.07k stars 259 forks source link

Ghosting while tab is not focused #226

Open jesper-bylund opened 6 years ago

jesper-bylund commented 6 years ago

I'm building a table that updates with new data constantly, basically a dashboard. Flip-move works really well while I'm watching the Tab. But if I click away to another tab for a few minutes animations seem to stop ending, so I get an unresponsive tab with lots and lots of ghosting.

Anyone have a clue as to what's going on?

screen shot 2018-05-07 at 10 00 25
joshwcomeau commented 6 years ago

Ah, I really dropped the ball on this one! Sorry for the monumental delay :(

Chrome throttles animations for tabs not in focus, and it sounds like it's not playing well with this library.

What exactly do you mean by "ghosting"?

Perhaps one solution would be to delay updating the DOM until the tab is focused. I found this SO answer which seems like a very similar story: https://stackoverflow.com/questions/7389328/detect-if-browser-tab-has-focus/7389429

I know this is almost 2 months old now, so you've likely already solved this problem, but on the off-chance it's helpful, I would suggest adding some listeners for when the window is focused/blurred, and to avoid updating the component state while it's blurred (you can still make the async data requests, but just hold the data in some transient place, and setState when focus is returned)

Happy to elaborate if needed!