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

[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

[metalmarker]

Hi @benschwarz - any chance you could provide a resolution to this? E.g., provide a fallback timeout? Beyond CSS animations, it looks like sentry.io, a popular code monitoring solution, is also preventing the browser from going idle (when using it's Replay integration, which captures screenshots, and is enabled by default).

Thanks for your consideration!

[benschwarz]

Hey @metalmarker, having given this some thought the only viable option that comes to mind is adding an idleDeadlineTimeout option whereby a user could configure a timeout period when idle isn't reached. If configured, live chat would load after a given period of time (e.g.: 10 seconds), regardless of page idle state. By default, it would not be set.

With the configuration, on pages that do idle, there shouldn't be any negative impact, and on pages that don't… chat would be loaded, despite the page never having idled, and no user intent to do so (e.g. hover over button)

This solution is not perfect from a user perspective as it would incur potentially non-required data transfer (and CPU cycles). Tho I don't see a better solution at hand. Do you?

Is anyone interested in contributing such a change? I'd be happy to review and help get it shipped ASAP.

[metalmarker]

@benschwarz, yes. That's the way. I've patched useChat.js on my project to achieve this effect.

[benschwarz]

@metalmarker Were you meaning to submit a PR? I was a little confused that the issue was closed without being resolved, so I've reopened so that it's tracked.

[metalmarker]

@metalmarker Were you meaning to submit a PR? I was a little confused that the issue was closed without being resolved, so I've reopened so that it's tracked.

Sorry Ben, that was a mistake on my side...