Eager loading frame not loading src content on second visit

1

I thought I understood Turbo well, but this is breaking my brain haha. I’m wondering if there’s a framework bug at play here or if I’m just really missing something. I’m working with a 100% static/html server for this example to try to eliminate any server-side issues.

Demo of issue

I have a frame using eager loading to show a loading message and then show the actual content:

<turbo-frame id="target-frame" src="./initial.html">
  Loading...
</turbo-frame>

initial.html delivers this:

<turbo-frame id="target-frame">
  <p>
    This is the loaded content!
  </p>
  <a href="./secondary.html">
    To secondary page
  </a>
</turbo-frame>

When you click “To secondary page” it works as expected and you get this:

<turbo-frame id="target-frame">
  <a href="./index.html">
    Back to first page
  </a>
</turbo-frame>

Clicking this link sends you back to the first page, but it gets stuck at the loading view (even though the network requests show it fetches the initial.html content). The only way I’ve been able to fix it is to add data-turbo-frame="_top" to my links which I don’t want to do because it kind of defeats the point of Turbo frames.

Thanks to anyone who can help point me in the right direction! I gotta think I’m missing something here…

2

This appears a bug. The software renders something like:

  • fetch index.html
    • create index snapshot
      • fetch initial.html
        • create initial snapshot
        • render initial snapshot
    • render index snapshot

Where the snapshot at the end contains the original index snapshot, not the index + initial snapshot.

I suggest submitting a bug report Issues · hotwired/turbo · GitHub

Personally, I’d also do something like:

<turbo-frame id="target-frame" src="./initial.html">
   <a href="./initial.html">Initial</a>
</turbo-frame>

…

<turbo-frame id="target-frame">
  <a href="./initial.html">Back to first page</a>
</turbo-frame>
3

Ok thank you! This makes me feel sane.

I opened this as an issue.