Modals with lazy-loaded background pages

1

Hi there, I have a page that lists gizmos. The application layout looks like this:

<%= turbo_frame_tag :main do %>
  <%= yield %>
<% end %>

<%= turbo_frame_tag :modal %>

Each link in the gizmo list looks like this:

<%= link_to gizmo.name, gizmo, data: { turbo_frame: “modal” } %>

Clicking a gizmo link loads the Gizmos#show page into the modal on top of the list. So far, so good.

It’s also possible to reach the Gizmo#show page via deep link (/gizmos/1234). When reached in this manner, I still want the list to appear under the modal, so the #show page contains a :main frame in which to lazy load it:

<%= turbo_frame :main, src: gizmos_path, loading: lazy %>

<%= turbo_frame :modal do %>
  <%# display Gizmo stuff here %>
<% end %>

That works.

The problem I’m facing is that, now, when I access the #show page from the original list, Turbo insists on performing the lazy load even though the frame’s already loaded. It doesn’t affect page performance as it’s a lazy load, but it’s still unnecessary traffic and it makes the background blink.

What I need is a conditional frame load. Has anyone come up with a cunning way to handle this? Thanks!

2

I’m not sure if this is the best solution to your problem, but what about adding a custom parameter to the URL and load (or not) the turbo frame based on that?

<% if params[:source] != "list" %>
  <%= turbo_frame :main, src: gizmos_path, loading: lazy %>
<% end %>

<%= turbo_frame :modal do %>
  <%# display Gizmo stuff here %>
<% end %>

You could also check the request.referer to avoid custom parameters or create another endpoint.

EDIT: using the deep link shouldn’t trigger a turbo request; it’s a regular request, so you could have a show.html.erb template to handle that and not use turbo frames at all.