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

[metalmarker]

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

[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!

[joerobot]

In the useChat hook- the note about deadline.timeRemaining() doesn't seem to hold true anymore? These numbers don't ever seem to exceed 14 or 15 for me (infinite animation or not).

[joerobot]

@benschwarz Here's a really minimal recreation to illustrate: timeRemaining upper limit on Glitch