Techioz Blog

Rails 7 + Turbo: ナビゲーション時に読み込み状態を表示しない

概要

Rails アプリケーションにターボ フレームを設定し、ユーザーがナビゲートできるようにしました。問題は、ユーザーがフレーム内で移動すると、ターボ フレームが更新され、その間に読み込み状態が表示されるまでに少し時間がかかることです。さて、それが起こらず、新しいフレームの準備ができるまで古いフレームを表示し、その後古いフレームを置き換えて、ユーザーが読み込み状態を決して見ないようにすることを希望します。それは可能ですか？それ以降、ナビゲーション時にフレームのコンテンツが現在のように「スナップ」しなくなるため、これを実行したいと考えています。

これが私の（簡略化された）コードです:

インデックス.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 %>

post_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

前もって感謝します！

解決策

有益な提案をありがとうございました!私はそれを考え出した。問題は、Feather Icons Library を使用していて、このライブラリでは Javascript を使用してビューにアイコンを配置する必要があることでした。 Javascript はビューがレンダリングされてからさらに数ミリ秒かかるため、アイコンはその後読み込まれ、ビューのレイアウトがわずかに変更されます。