feat(member): stream the overview with keyset infinite scroll instead of loading every member

assets/js/app.js

@@ -126,6 +126,29 @@ Hooks.RowSelectionGuard = {
   }
 }
 
+// StickyViewportWidth: size a `position: sticky; left: 0` element to the visible width
+// (clientWidth) of its horizontally-scrolling container. The infinite-scroll loading bar
+// lives in a full-width table row that is wider than the viewport when the table scrolls
+// horizontally; matching the sticky element to the container's visible width keeps its
+// centered content pinned at the bottom-center of the visible area instead of drifting off
+// with the scrolled table. The data-scroll-container attribute names the container element id.
+Hooks.StickyViewportWidth = {
+  mounted() {
+    this.container = document.getElementById(this.el.dataset.scrollContainer)
+    this.sync = () => {
+      if (this.container) this.el.style.width = this.container.clientWidth + "px"
+    }
+    this.sync()
+    window.addEventListener("resize", this.sync)
+  },
+  updated() {
+    this.sync()
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.sync)
+  }
+}
+
 // FocusRestore hook: WCAG 2.4.3 — when a modal closes, focus returns to the trigger element (e.g. "Delete member" button)
 Hooks.FocusRestore = {
   mounted() {
@@ -360,6 +383,37 @@ Hooks.SidebarState = {
   }
 }
 
+// LoadMorePrefetch: fires an infinite-scroll load event as the sentinel
+// approaches the viewport, rather than only once it is fully scrolled into view.
+// An IntersectionObserver rooted at the scroll container with a positive bottom
+// rootMargin treats the sentinel as visible while it is still that many pixels
+// below the fold, so the next page loads ahead of time. It complements the
+// built-in phx-viewport-bottom binding (which stays as a reliable backstop);
+// duplicate loads are harmless because the server guards on "more?" and the
+// stream de-duplicates rows by id.
+Hooks.LoadMorePrefetch = {
+  mounted() {
+    const container = document.getElementById(this.el.dataset.scrollContainer)
+    const rootMargin = `0px 0px ${this.el.dataset.margin || "600px"} 0px`
+    const event = this.el.dataset.event || "load_more"
+    let lastPush = 0
+
+    this.observer = new IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return
+      const now = Date.now()
+      if (now - lastPush < 400) return
+      lastPush = now
+      this.pushEvent(event)
+    }, {root: container || null, rootMargin, threshold: 0})
+
+    this.observer.observe(this.el)
+  },
+
+  destroyed() {
+    if (this.observer) this.observer.disconnect()
+  }
+}
+
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {
@@ -378,6 +432,15 @@ window.addEventListener("phx:set-input-value", (e) => {
   }
 })
 
+// Return the members list to the top after a sort or filter change. The server
+// resets the keyset stream to page 1 on those changes and pushes this event; a
+// user scrolled down would otherwise be stranded past the shorter content with
+// infinite scroll not re-arming. No-op if the scroll container is absent.
+window.addEventListener("phx:members:scroll-top", () => {
+  const el = document.getElementById("members-table-guard")
+  if (el) el.scrollTop = 0
+})
+
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
 window.addEventListener("phx:page-loading-start", _info => topbar.show(300))