Ghosting while tab is not focused

[jesper-bylund]

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?

[joshwcomeau]

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!