How do I show a loading indicator in place for the turbo frame content every time?

1

I’m a hotwired/turbo newbie so maybe there’s a simple way to do this but this is what I’m trying to achieve:

  • I have a drawer component that opens when the user clicks a button/link
  • within this drawer, I have a turbo frame that loads a form from the server side and then displays it to the user
  • there’s a loading state that shows up while the turbo frame is loading

here’s some pseudo code that demonstrates that:

<%= render DrawerComponent.new() do %>
    <%= turbo_frame_tag "edit_form" do %>
        <div>
            Loading...
        </div>
    <% end %>
<% end %>

The issue with this

The main issue with this is that on the page, there’s only 1 drawer component and the user can choose to edit 1 or more items. Because of this, the first time around, I see the “Loading…” text as expected but since that content is replaced with the form content after it’s loaded the first time, I can’t seem to figure out how to show the “Loading…” text for subsequent drawer opens.

Maybe I’m thinking about this the wrong way, any help is appreciated here.

2

Simple solution is to use a little Javascript add an event listener for clicking on the links and update the turbo-frame with the loading UI