Infinite scroll is a pagination mechanism where whenever the user reaches the end of the scroll area more content is loaded till there are no more content to load.

Introduction

Hotwire is a new set of tools extracted from Hey by Basecamp. It uses Asynchronous HTML and HTTP (also known as AHAH) to render partial updates to the DOM without full browser reload. You build your servers with any language of your choice and let Turbo handle the partial updates for you. Which makes your application to have a speed of an SPA while having the benefits of server-rendered partials.

HOTWire is not a single tool, but three tools that allow you to build super fast apps while not having to write tons of client-side JavaScript to manage the updates. The tools within HOTWire are

1- Turbo: which is responsible for the navigation in your application and rendering the server responses to update the correct partial in the DOM.

2- Stimulus: Sometimes we would like to add a little bit of client-side behaviour to our site, the feature is too simple to let Turbo manage it and doesn't require a round trip to the server. There, Stimulus comes into play. You add behaviour to your HTML and sprinkles of JavaScript for this.

3- Strada: Standardizes the way that web and native parts of a mobile hybrid application talk to each other via HTML bridge attributes

References:

• https://stimulus.hotwired.dev/

rails new InfiniteScrollStimulusExample -c=bootstrap -j=esbuild cd InfiniteScrollStimulusExample bundle add kaminari faker yarn add @rails/request.js rails g scaffold Post title body:text

Modify action index in app/controllers/posts_controller.rb

# app/controllers/posts_controller.rb class PostsController < ApplicationController ... def index @page = params[:page] || 1 @posts = Post.page @page end ... end

Create infinitive_pagination stimulus controller

rails g stimulus infinitive_pagination

// infinitive_pagination_controller.js import { Controller } from "@hotwired/stimulus" import { get } from "@rails/request.js" // Connects to data-controller="infinitive-pagination" export default class extends Controller { static targets = ['lastPage', 'loadMoreButton'] static values = { url: String, page: Number, } initialize() { this.handleScroll = this.handleScroll.bind(this) this.pageValue = this.pageValue || 1 this.loading = false } connect() { window.loadMoreButtonTarget = this.loadMoreButtonTarget window.addEventListener("scroll", this.handleScroll) } disconnect() { window.removeEventListener("scroll", this.handleScroll) } handleScroll() { const reachEndPage = this.hasReachEndPage() if (reachEndPage && !this.hasLastPageTarget) { this.loadMore() } else { this.hideLoadMoreButton() } } hasReachEndPage() { const bottomHeight = 20 let body = document.body, html = document.documentElement let height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight) const distance = height - window.innerHeight - bottomHeight const reachEndPage = window.scrollY >= distance return reachEndPage } hasReachEndPage2() { const bottomHeight = 20 const { scrollHeight, scrollTop, clientHeight } = document.documentElement const distance = scrollHeight - scrollTop - clientHeight return distance < bottomHeight } async loadMore() { if (this.loading) { return } this.loading = true this.pageValue += 1 const url = new URL(this.urlValue) const currentSearchParams = new URLSearchParams(window.location.search) for (const [key, value] of currentSearchParams) { url.searchParams.set(key, value) } url.searchParams.set('page', this.pageValue) await get(url.toString(), { responseKind: 'turbo-stream' }) this.loading = false } async handleLoadMoreButton(e) { await this.loadMore() e.target.blur() } hideLoadMoreButton() { this.loadMoreButtonTarget.classList.add('d-none') } }

Modify index.html.erb

<p style="color: green"><%= notice %></p> <h1>Posts</h1> <%= link_to "New post", new_post_path %> <div data-controller="infinitive-pagination" data-infinitive-pagination-url-value="<%= posts_url %>" data-infinitive-pagination-page-value="1" > <div id="posts"> <% @posts.each do |post| %> <%= render post %> <p> <%= link_to "Show this post", post %> </p> <% end %> </div> <button data-action="click->infinitive-pagination#handleLoadMoreButton" data-infinitive-pagination-target="loadMoreButton"> Load more </button> </div>

Create index.turbo_stream.erb

<%= turbo_stream.append "posts" do %> <%= render @posts %> <% if @posts.page(@page.to_i + 1).out_of_range? %> <span class="hidden" data-infinitive-pagination-target="lastPage"></span> <% end %> <% end %>

Modify db/seeds.rb

# db/seeds.rb 500.times do Post.create title: Faker::Movie.title, body: Faker::Quote.famous_last_words end

Migrate database and seed data

rails db:migrate db:seed

Currently I am running many apps with many different ports, while the Rails app will run on the default port 3000, so I need to update the Procfile.dev file to run on another port, here I will use the port 4001 to avoid conflicts, like the Procfile.dev content below::

web: env RUBY_DEBUG_OPEN=true bin/rails server -p 4001 js: yarn build --watch css: yarn watch:css 

Run app

./bin/dev

Open your browser and goto http://localhost:4001/posts

Enjoy!!! 😄

If you have any questions, please do not hesitate to contact me via X (Twitter) @nguyentamvn or Facebook @nguyentamvinhlong