infinite scroll for topic talks (#565)

Author: adrienpoly

app/controllers/topics_controller.rb

@@ -12,9 +12,11 @@ def index
 
   def show
     @topic = Topic.find_by!(slug: params[:slug])
-    @pagy, @talks = pagy(
+    @pagy, @talks = pagy_countless(
       @topic.talks.includes(:speakers, event: :organisation, child_talks: :speakers).order(date: :desc),
-      limit: 12,
+      gearbox_extra: true,
+      gearbox_limit: [12, 24, 48, 96],
+      overflow: :empty_page,
       page: params[:page]&.to_i || 1
     )
   end

app/javascript/controllers/auto-click_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+import { useIntersection } from 'stimulus-use'
+
+// Connects to data-controller="auto-click"
+export default class extends Controller {
+  static values = {
+    rootMargin: { type: String, default: '400px 0px 0px 0px' }
+  }
+
+  initialize () {
+    useIntersection(this, { rootMargin: this.rootMarginValue })
+  }
+
+  appear () {
+    this.element.click()
+  }
+}

app/javascript/controllers/index.js

@@ -4,6 +4,9 @@
 
 import { application } from "./application"
 
+import AutoClickController from "./auto-click_controller"
+application.register("auto-click", AutoClickController)
+
 import AutoSubmitController from "./auto_submit_controller"
 application.register("auto-submit", AutoSubmitController)
 

app/views/topics/_talks_cursor.html.erb

@@ -0,0 +1,10 @@
+<% manual = (pagy.page % 3 == 0) %>
+<% controller = manual ? "" : "auto-click" %>
+
+<div class="<%= class_names("flex justify-center", invisible: !manual) %>" id="talks-cursor">
+  <% if pagy.next %>
+    <%= link_to "Load more", topic_path(topic, page: pagy.next),
+          class: "btn btn-primary",
+          data: {turbo_stream: true, controller: controller} %>
+  <% end %>
+</div>

app/views/topics/show.html.erb

@@ -22,7 +22,5 @@
             back_to_title: @topic.name
           } %>
   </div>
-  <div class="flex mt-4 w-full">
-    <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
-  </div>
+  <%= render "topics/talks_cursor", pagy: @pagy, topic: @topic %>
 </div>

app/views/topics/show.turbo_stream.erb

@@ -0,0 +1,16 @@
+<%= turbo_stream.append "topic-talks" do %>
+  <%= render partial: "talks/card",
+        collection: @talks,
+        as: :talk,
+        locals: {
+          favoritable: true,
+          user_favorite_talks_ids: @user_favorite_talks_ids,
+          watched_talks_ids: user_watched_talks_ids,
+          back_to: back_to_from_request,
+          back_to_title: @topic.name
+        } %>
+<% end %>
+
+<%= turbo_stream.replace "talks-cursor" do %>
+  <%= render "topics/talks_cursor", pagy: @pagy, topic: @topic %>
+<% end %>

config/initializers/pagy.rb

@@ -1,6 +1,7 @@
 require "pagy/extras/meilisearch"
 require "pagy/extras/overflow"
 require "pagy/extras/gearbox"
+require "pagy/extras/countless"
 
 Pagy::DEFAULT[:overflow] = :last_page
 Pagy::DEFAULT[:gearbox_extra] = false