[Bug] Chat widget doesn't load when there's a CSS animation on the page.

[metalmarker]

Thank you for writing this useful library.

The issue is that the chat widget doesn't load after timeout when there's CSS animation on a continuous loop on the homepage (or the first page that is loaded). It looks like the root cause is that requestidleCallback() doesn't fire because the browser doesn't consider the page to be idle while CSS animations are running.

One potential solution is to add an optional parameter that forces the provider to load the chat widget after a timeout, even on browsers that do support requestidleCallback.

[benschwarz]

Hey @metalmarker 👋

Could you confirm, are you using the idlePeriod attribute at all?

I wouldn't have expected a CSS animation to delay or block requestIdleCallback(), do you have a reproduction or test page that clearly demonstrates this behavior? If you aren't able to share your page, a screenshot of the Chrome performance tab/trace will be helpful to help diagnose the issue.

[metalmarker]

First, the issue is only on Chrome - Safari and FireFox do not implement requestIdleCallback() anyway.

While CSS animations do not block requestIdleCallback(), it looks like the loader's implementation is sensitive to it.

I created a CodeSandBox that reproduces the issue and noticed that the widget doesn't load on timeout when the app runs alongside the CodeSandBox editor (i.e., both the editor and app run within the same tab) even without any animation. It looks like the CodeSandBox editor is running some background tasks, thus inhibiting the loader.

Note that if you spawn the app on a separate tab from the CodeSandBox editor then the widget does load when there's no animation, and doesn't load when animation is running (there's an animate boolean that controls whether animation is running or not).

Hope that helps!