Proposal: Frame reloads through Streams

7

Turbo frame pulls content, turbo stream replaces content. I don’t know that the need to be combined.

To avoid the flicker, add one more layer in loading the content.

INITIAL PAGE HTML:

<div id="message">

</div>

<turbo-frame id="message_frame" src="/messages/123" style="display: none;"></turbo-frame>

URL TURBO FRAME URL RESPONSE (/messages/123)

<turbo-stream id="message_frame" style="display: none;">
  <template>
    <turbo-frame id="message">
      Mesagges
    </turbo-frame>
  </template>
</turbo-stream>

WEBSOCKET UPDATE

<turbo-stream action="replace" target="message_123">
  <template>
    <turbo-frame id="message_frame" src="/messages/123" style="display: none;">
      Updating...
    </turbo-frame>
  </template>
</turbo-stream>

If this were a part of turbo if it was more more generic. Meaning, updating attributes on an element rather than replace the entire element.