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

@usmanity usmanity
Wed, 27 Aug 2025 22:17:45 +0000

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 %>

            Loading...

    <% 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.