feat: implement infinite scroll for bounties page

Author: zcesur

assets/js/app.ts

@@ -461,6 +461,42 @@ const Hooks = {
       });
     },
   },
+  InfiniteScroll: {
+    mounted() {
+      this.observer = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry.isIntersecting) {
+            this.pushEvent("load_more");
+          }
+        },
+        {
+          root: null, // viewport
+          rootMargin: "0px 0px 400px 0px", // trigger when indicator is 400px from viewport
+          threshold: 0.1,
+        }
+      );
+
+      const loadMoreIndicator = document.getElementById("load-more-indicator");
+      if (loadMoreIndicator) {
+        this.observer.observe(loadMoreIndicator);
+      }
+    },
+
+    updated() {
+      // Re-observe the indicator after updates
+      const loadMoreIndicator = document.getElementById("load-more-indicator");
+      if (loadMoreIndicator) {
+        this.observer.observe(loadMoreIndicator);
+      }
+    },
+
+    destroyed() {
+      if (this.observer) {
+        this.observer.disconnect();
+      }
+    },
+  },
 } satisfies Record<string, Partial<ViewHook> & Record<string, unknown>>;
 
 // Accessible focus handling
@@ -643,3 +679,5 @@ window.addEventListener("phx:open_popup", (e: CustomEvent) => {
     newWindow.focus();
   }
 });
+
+export default Hooks;

lib/algora_web/live/org/bounties_live.ex

@@ -12,7 +12,7 @@ defmodule AlgoraWeb.Org.BountiesLive do
 
   def render(assigns) do
     ~H"""
-    <div class="max-w-7xl mx-auto p-6">
+    <div class="max-w-7xl mx-auto p-6" id="bounties-container" phx-hook="InfiniteScroll">
       <div class="mb-6">
         <div class="flex flex-wrap items-start justify-between gap-4 lg:flex-nowrap">
           <div>
@@ -218,10 +218,10 @@ defmodule AlgoraWeb.Org.BountiesLive do
           </table>
         </div>
       </div>
-      <div :if={@has_more} class="flex justify-center mt-4">
-        <.button variant="ghost" phx-click="load_more">
-          <.icon name="tabler-arrow-down" class="mr-2 h-4 w-4" /> Load More
-        </.button>
+      <div :if={@has_more} class="flex justify-center mt-4" id="load-more-indicator">
+        <div class="animate-pulse text-gray-400">
+          <.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
+        </div>
       </div>
     </div>
     """