Rails 7 + Turbo: Do not show loading state when navigating

Question

I have a turbo frame set up in my Rails application that the user can navigate. The problem is that when a user navigates within the frame, the turbo frame takes a few moments to update during which it shows the loading state. Now, I would prefer if that did not happen and it showed the old frame until the new frame is ready and then replaces the old frame so that the user never sees the loading state. Is that possible? I would like to do this since then the content of the frame would not "snap around" like it does right now when navigating.

Here is my (simplified) code:

index.html.erb

<%= turbo_frame_tag "posts", src: search_path do %>
  Loading results...
<% end %>

_posts.html.erb

<%= turbo_frame_tag "posts" do %>
  <%= link_to "Next Page", search_path(page: (params[:page]&.to_i || 0) + 1) %>
  <% posts.each do |post| %>
    <div>
      <p><%= post.name %></p>
      <p><%= post.body %></p>
    </div>
  <% end %>
<% end %>

posts_controller.rb

class PostsController < ApplicationController
  ...
  def search
    posts = Post.all
    posts = posts.offset((params[:page]&.to_i || 0) * 50).limit(50)
    render(partial: "posts", locals: { posts: posts })
  end
  ...
end

Thanks in advance!

Answer 1

I figured it out. The problem was that I was using the Feather Icons Library and the library requires the icons to be placed in the view by using Javascript. Because of the Javascript needs a few more milliseconds after the view had been rendered, the icons would only then load in and thus change the layout of the view slightly. Thanks again for the helpful suggestions!