Turbo Stream From and Browser Tabs

[marcioniliolive]

Hello to all turbo developers, first of all, thank you for having such an amazing tool.

But currently on my site, my users have reported something to me that I hadn't noticed yet. On my platform some data is transmitted via callback with the broadcast to the turbo-stream-from tag.

The problem is that the DOM update, and the insertion or updating of elements only happen when we are directly in the site's tab, if we go to another tab, for example, when we come back, all the items that should have been rendered there, all come from once!

[dhh]

That's unfortunately up to browsers. When they choose to suspend updates. I know Safari is more aggressive about this. Not aware of anything we can do as web developers about this.

[michelson]

@dhh I think this is a bug on Turbo. I have a chat an application that currently works on React. And we are porting all the stuff to hotwire.

when the message is received an stimuls controller plays a sound on initialize()

Videos, please turn volume on.

React version:

Screen.Cast.2023-10-19.at.9.09.49.PM.mp4

Hotwire version

Screen.Cast.2023-10-19.at.8.59.23.PM.mp4

ref: hotwired/stimulus#731

[michelson]

now I'm trying to get a grasp on the code on Turbo. it seems that the issue could be in the stream_message_renderer which uses some sort of focusing
https://github.com/hotwired/turbo/blob/main/src/core/streams/stream_message_renderer.js#L60
it seems like requestAnimationFrame is paused when the tab is inactive. I will keep investigating this.

[michelson]

@dhh note that I've replaced all the nextRequestAnimation() with nextMicrotask(), and it works!, not sure which one did the trick, but there is still hope for moving off React

Screen.Cast.2023-10-19.at.10.22.18.PM.mp4

[michelson]

I have tried some things by replacing one by one and it seems that we should replace each call of nextAnimationFrame.

[indigotechtutorials]

Nice! This seems like a great improvement to the library

[michelson]

I'm struggling with the PR right now, trying to pass just 3 specs from the complete test suite.
wondering dhh thoughts on this, on how they handle this use case in hey?