Turbo Frames: infinite scroll with lazy-loading frame

14843 views

                  <div id="snips">
  <%= render @snips %>
</div>

<% if @snips.next_page %>
  <%= turbo_frame_tag "snips_page_#{@snips.next_page}",
        src: snips_path(page: @snips.next_page),
        loading: :lazy do %>
    Loading…
  <% end %>
<% end %>

                  class SnipsController < ApplicationController
  def index
    @snips = Snip.by_active.page(params[:page]).per(25)
    render layout: !turbo_frame_request?
  end
end

Infinite scroll can be done with plain HTML + Turbo Frames. Render a “next page” frame with loading: :lazy so Turbo fetches it when it enters the viewport. No JS required, and it degrades gracefully.

Sarah Chen

More from Sarah Chen

Turbo Frames: infinite scroll with lazy-loading frame

0 Comments

More from Sarah Chen