lottie-web
lottie-web copied to clipboard
[Bug?] Browser's Idle callback never called
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 ?
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.