How would you modify the above to display  the `Loading` text after you click the *Refresh* link?

Also, assume you can accomplish the same if the link was outside the <turbo-frame-tag> using the `<data-turbo-frame>` attribute?

What rails extension do you use? I don't see it listed in the description.

Thanks  ☒ I was hoping there was an easy non-Stimulus/JS solution (as I haven't dug into Stimulus yet). Maybe there is but you're solution is probably fine. I will experiment with your solution and see what I come up with!

One 'bug' which I noticed in my implementation is that if a user clicks outside the modal to dismiss it, navigates to a different page, then returns to the page with the modal, the page displays the model immediately. I believe this is because displaying the remote modal add the modal's content within the Turbo Frame tag, which Turbo caches and reloads when the user navigates away and back to the page. I downloaded your source and believe I was able to reproduce.

I wrote the following which will reset the Turbo Frame tag whenever the modal is hidden:

    const modalElement = document.getElementById('remote_modal');
    modalElement.addEventListener('hidden.bs.modal', event => {
      var newTurboFrameTag = document.createElement("turbo-frame");
      newTurboFrameTag.setAttribute("id", "remote_modal");
      modalElement.replaceWith(newTurboFrameTag);
    });

I'm no Javascript expert, but this seems to do the trick. Would love your feedback on this Dave - ideas to enhance or alternatives.