Paginate in Turbo Mode - Part 2: Infinite Scroll

An alternative to next/previous style pagination is to have infinite scrolling. With infinite scroll, once you hit the bottom of the page, you load in the next set of results. Again, Turbo Stream makes this very achievable.

This is done by:

1. Loading in the first set of results.
2. Adding a lazy loading <turbo-frame> that will return the next set of results.
3. Append the new results and replace the lazy <turbo-frame> with a new one that will load the next page.

The updated index.html.erb that will accomplish steps 1 and 2 above will look something like:

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

<%= turbo_frame_tag(:next_page, 
		src: posts_path(page: @next_page, format: :turbo_stream), 
		loading: :lazy
	) do %>
	loading…
<% end if @next_page %>

loading: :lazy will wait for the element to be visible on the page before fetching the page. For the src we include the turbo_stream format so we can respond differently than an normal next page request.

By default, if we have a index.turbo_stream.erb template, Rails will use that with a format: :turbo_stream request. Then that happens we want to append the new posts, which will push the next <turbo-frame> off the page, and we want to replace that frame with a new one that will load the next page:

<%= turbo_stream.append :posts do %>
  <%= render @posts %>
<% end %>

<%= turbo_stream.replace :next_page do %>
  <%= turbo_frame_tag(:next_page,
	  	src: posts_path(page: @next_page, format: :turbo_stream),
		loading: :lazy
	) if @next_page %>
<% end %>

And that is all that you need to get infinite scrolling.

Tomorrow we will look at what you should be considering when choosing to do infinite scroll or not.