Replace call to requestAnimationFrame in render function to update page content even if tab has lost focus

[jadetr]

Here is the case we are facing:

• we use Turbo.visit method to fetch a page's content that hold a TurboStream socket connection
• If we switch the browser tab (Tab with Rails app loses focus) before the whole page is loaded. The JS is blocked in Turbo's render method at line: this.frame = requestAnimationFrame(() => resolve())
• The requestAnimationFrame doesn't fire callback when the tab has lost focus
• The result is that the new page'S content is never rendered and the TurboStream socket is not connected.
• Few minutes later, we go back into our app browser Tab, the requestAnimationFrame fire, the page is rendered and the TurboStream socket is connected.

Problem:

• When we go back into the tab, The page show outdated HTML content that should have been updated by the TurboStream socket.

[afcapel]

@jadetr is this happening in a particular browser, or is it a common implementation? The spec says that browser should only clear the callback list if the document is visible and the callback has been processed.

[michelson]

@afcapel we are facing this issue on a chat application please see the video examples at hotwired/turbo-rails#338

[michelson]

Indeed we have replaced ALL nextAnimationFrame for the nextMicroTask and it works, not sure which one did the trick tho. I've added a screen-recording with the working solution at hotwired/turbo-rails#338

[jadetr]

@afcapel sorry for now replying before. I didn't test it in other browser and I had to implement a workaround when I've hit this bug few months ago. In other terms, I cannot easily test it on other browser now. @michelson seems to have a working solution, great!

[brunoprietog]

I guess we can close this since #1042 was merged

[afcapel]

Fixed in #1042