Skip to content

Instantly share code, notes, and snippets.

@oliveira-andre
Created April 10, 2025 15:07
Show Gist options
  • Save oliveira-andre/dfd0dbbeecc6db55cc2f6b71f3f2d563 to your computer and use it in GitHub Desktop.
Save oliveira-andre/dfd0dbbeecc6db55cc2f6b71f3f2d563 to your computer and use it in GitHub Desktop.
Infinite Scrolling with Hotwire turbo frames

Infinite Scrolling With Hotwire turbo frames (NO JS)

We gonna use Pagy for pagination

bundle add pagy

include defaults on application_controller.rb

include Pagy::Backend

And on application_helper.rb

include Pagy::Frontend

Now Include pagination to your controller

def index
  @pagy, @todos = pagy(Current.user.todos)
end

On the view include 2 new turbo frame tags one with current page rendering records And another one including next page

<%= turbo_frame_tag :page, @pagy.page do %>
  <%= render @todos %>

  <% if @pagy.next %>
    <%= turbo_frame_tag :page, @pagy.next, src: todos_path(page: @pagy.next), loading: :lazy do %>
      <%= spinner.html_safe %> Loading...
    <% end %>
  <% end %>
<% end %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment