はじめに

Railsアプリでデータベースの内容を表示する際、データベースのクエリーが返ってくるまでに時間がかかる場合に、結果が返ってくる前の段階でスケルトンを表示したいことがありました。

Turbo Framesの利用

この挙動はTurbo Framesの遅延読み込みを導入すれば解決できそうと考えて調べていたところ、以下の記事が参考になりそうでした。

遅延読み込み先の設定

app/controllers/welcome_controller.rb

class WelcomeController < ApplicationController
  def index_lazy
    @contents = Content.all.limit(10)
  end
end

app/views/welcome/index_lazy.html.erb

<%= turbo_frame_tag :index_lazy do %>
  <% @contents.each do |content| %>
    <%= link_to content, data: {turbo_frame: '_top'} do %>
      <div><%= content.name %></div>
    <% end %>
  <% end %>
<% end %>

config/routes.rb

Rails.application.routes.draw do
  get '/index_lazy', to: 'welcome#index_lazy'
end

遅延読み込み元の設定

app/views/welcome/index.html.erb

<%= turbo_frame_tag :index_lazy, src: '/index_lazy', loading: :lazy do %>
<% end %>

スケルトンの設定

リストが表示されるまでは空白となっているため、空白ではなくスケルトンを表示するようにします。

app/views/welcome/index.html.erb

<%= turbo_frame_tag :index_lazy, src: '/index_lazy', loading: :lazy do %>
  <% 10.times do  %>
    <!-- Skelton -->
  <% end %>
<% end %>

おわりに

Turbo Framesの遅延読み込みを導入して、ページ表示の挙動を制御することができました。Hotwire関連はまだ使った経験が少ないので、いろいろと試していきたいと思います。