search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
29.85k stars 2.85k forks source link

[Bug?] Browser's Idle callback never called #3002

Open ChezMose opened 1 year ago

ChezMose commented 1 year ago

Environment In a static website using Next.js.
Tested in
Chrome 114.0.5735.134
Firefox 114.0.2 (64 bits)

How to reproduce Add a lottie animation in any page and add a callback to window.requestIdleCallback.
The callback is never called if the animation is endlessly repeating.

The issue This is causing side effects with some third-party tools that relies on the requestIdleCallback to lazily load less-important stuff.
For example, react-live-chat-loader adds a facade for your messenger and silently load the online messenger when the browser is idle.
When there is a lottie animation on the page, the messenge won't load it in the background.

The Web Vitals becoming more and more important, using the requestIdleCallback will probably be a good way to optimize many third party tools, and this concern could be detrimental to lottie.

The solution Maybe letting the browser be idle for a few ms between repeating animation loop ?

roryabraham commented 11 months ago

I am running into issues with this using react native (and react-native-web) because InteractionManager.runAfterInteractions is a common way to perform callbacks after navigation actions are completed.

However, this is causing problems because InteractionManager.runAfterInteractions uses requestIdleCallback under the hood in react-native-web, and therefore lottie animations can cause it to never run.