Intercom never loading on idle until page goes to background
stramel opened this issue · 14 comments
I have implemented the intercom provider into my nextjs app. However, it never loads until the tab is in the background (switching tabs for idlePeriod) and then switching back. This is most definitely not the intended functionality.
it never loads until the tab is in the background
Intercom will be fetched when the browser becomes idle, the user mouses over the widget, or the idle timeout is reached.
Any activity you've observed where intercom is not loaded until switching tabs is likely to be the idle timeout being reached.
I don't believe you've observed a bug but please feel free to add additional information to help track down any issues or problems in documentation. ✌️
@benschwarz Sorry I was trying to figure out how to provide enough information without exposing my company information...
Here is a basic scaffold, https://stackblitz.com/edit/nextjs-kf1iyw?file=pages/index.js
Here is another example on CSB, https://codesandbox.io/s/zealous-fog-tyilr?file=/pages/index.js
None ever load without going to background or hovering the button.
Also, note, I made sure to kill everything except my server and the browser.
@stramel We're not seeing this behaviour. In Safari, Chrome and Firefox when I go to https://tyilr.sse.codesandbox.io/ Intercom loads without any user interaction.
Firefox is slower, but I believe this is due to how requestIdleCallback is implemented vs the other browsers.
Do you have any extensions or add-ons in your browser that could be interfering?
@mikedijkstra Thanks for pointing that out. I am able to see it loading using the CSB url but still having trouble with my local project. I have tried it in a Incognito Browser with my local and no luck :/ Not sure how to best show that it's not loading.
@mikedijkstra Not sure if this will be helpful, I exported my network log https://drive.google.com/file/d/1ZViP0IYb8hXliw060wnWTJ_DKt2hkuaC/view?usp=sharing
Minutes of waiting for it to load and it doesn't until I send the tab to background
@stramel Most likely there is no quiet period while the tab is active and therefore the callback never fires. I can see two responses that are ~50mb each that could be the cause. The purpose of this library is to ensure that third parties have the lowest loading priority on the page that's why we wait for the browser to become idle for a period of time.
We could be open to a PR that adds a timeout option to the requestIdleCallback however I think the best thing to do is to ensure your page finishes loading and the browser becomes idle as quickly as possible.
You could also experiment by setting a lower idlePeriod so you wait for the first moment the browser is idle even for a millisecond, but again, I think you'll get a better result by ensuring your page finishes loading and as quickly as possible.
@mikedijkstra Thanks! I will try to debug a bit further and try a few things. I think a timeout option would be good too, I have played around with it a bit too.
Also, have you all thought about ensuring it loads after DOMContentLoaded event?
Also, just noticed that I get this sometimes...
[Violation] 'requestIdleCallback' handler took 59ms
This was my performance log... I can see the requestIdleCallback firing multiple times https://drive.google.com/file/d/1l_p0anwgKb9I1Crdy57S2t5_FWMdjaw5/view?usp=sharing
@stramel Have you tried reducing the idlePeriod? By default the library waits for 2s worth of request idle callbacks.
@mikedijkstra idlePeriod doesn't seem to have any effect for me. I even set it to 1
@stramel In the har file you shared I can see two very large JS files (one is 52.8mb and the other is 44.9mb). I don't know what's in these but this is not a typical site so I can only assume there's a lot of main thread activity that's preventing it from loading. The example sites work as expected so I still think you need to work out how to reduce that JS and reduce the main thread activity on your site to get the benefit of this library.
@mikedijkstra Yeah, we definitely have something wrong in our dev environment but our production isn't as bad. We're working to swap into a different monorepo setup that hopefully won't have the dev problems. I appreciate your time and help!
@stramel I'm having the same issue as you, did you come up with a working solution for this?