Rails 7 + Turbo：导航时隐藏Turbo Frame加载状态咨询

要实现Turbo Frame导航时保留旧内容、避免加载状态和内容跳动，以下是两种可行方案：

方案一：使用Turbo原生属性（Turbo 7.2+） #

Turbo 7.2及以上版本提供了data-turbo-keep-content-until-load属性，直接添加到Turbo Frame标签即可实现需求。

修改index.html.erb中的Turbo Frame代码：

<%= turbo_frame_tag "posts", src: search_path, data: { turbo_keep_content_until_load: true } do %>
  Loading results...
<% end %>

配置后，用户点击分页链接时，Turbo会在后台加载新内容，同时保留当前显示的旧内容，直到新内容完全就绪后才替换，全程无加载状态显示和内容跳动。

方案二：低版本Turbo兼容方案（Turbo <7.2） #

如果你的Turbo版本低于7.2，可通过CSS配合实现：

1. 修改index.html.erb，给Turbo Frame添加自定义类名：

<%= turbo_frame_tag "posts", src: search_path, class: "persist-content-frame" do %>
  Loading results...
<% end %>

2. 添加CSS样式，隐藏加载时的替换状态，强制保留旧内容：

.persist-content-frame[aria-busy="true"] {
  visibility: visible !important;
}
.persist-content-frame .turbo-frame-loading {
  display: none;
}

额外注意事项 #

• 确保_posts.html.erb中的Turbo Frame ID与index.html.erb一致（均为posts），否则Turbo无法正确替换内容。
• 当前控制器search方法的partial渲染逻辑正确，无需修改。

内容的提问来源于stack exchange，提问作者user19282462