_collection.erb

<%= turbo_frame_tag "conversation-list-#{@app.key}" do %>
		<%= render partial: 'conversation', collection: @conversations, locals: {app: @app} %>
<% end %>

_pagination.erb

<%= turbo_frame_tag 'conversation-list-pagination' do %>
	<%= paginate @conversations, 
		params: { 
			controller: 'conversations', 
			action: 'index', 
			app_id: @app.key, 
			_: nil, 
			_method: nil, 
			authenticity_token: nil, 
			utf8: nil
		} %>
<% end %>

controller.rb

class Apps::ConversationsController < ApplicationController
  before_action :find_app

  def index
    
    
    render turbo_stream: [
        turbo_stream.append(
          "conversation-list-#{@app.key}",
          partial: "apps/conversations/conversation",
          collection: @conversations,
          locals: {
            app: @app
          }
        ),

        turbo_stream.replace(
          "conversation-list-pagination",
          partial: "apps/conversations/pagination"
        )
      ]
  end
    
  

index.erb

   <div class="flex">

      <div data-controller="infinite-scroll" 
         class="w-full md:w-4/12 h-screen md:border-r sm:block border-gray-200 dark:border-gray-900">
         
         <div 
            class="overflow-scroll" 
            style="height: calc(100vh - 60px);"
            data-infinite-scroll-target="entries"
            >

            <%= render 'collection' %>

            <div class="invisible h-1" data-infinite-scroll-target="pagination">
               <%= render partial: 'apps/conversations/pagination' %>
            </div>

         </div>
      </div>

infinite_scroll_component.js

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ['entries', 'pagination']

  initialize() {
    let options = {
      rootMargin: '20px',
    }

    this.intersectionObserver = new IntersectionObserver(
      (entries) => this.processIntersectionEntries(entries),
      options
    )
  }

  connect() {
    this.intersectionObserver.observe(this.paginationTarget)
  }

  disconnect() {
    this.intersectionObserver.unobserve(this.paginationTarget)
  }

  processIntersectionEntries(entries) {
    console.log('ENTRIES', entries)
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        this.loadMore()
      }
    })
  }

  loadMore() {
    let next_page = this.paginationTarget.querySelector("a[rel='next']")
    if (next_page == null) {
      return
    }
    let url = next_page.href

    console.log('NEXT PAGE:', next_page)

    next_page.click()
  }
}