add infinite scroll

app/javascript/application.js

@@ -13,6 +13,7 @@ import NativeAction from './elements/native_action'
 import NativeSearch from './elements/native_search'
 import NativeModal from './elements/native_modal'
 import NativeEvent from './elements/native_event'
+import InfiniteScroll from './elements/infinite_scroll'
 import ModalButton from './elements/modal_button'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
@@ -127,6 +128,7 @@ safeRegisterElement('native-action', NativeAction)
 safeRegisterElement('native-search', NativeSearch)
 safeRegisterElement('native-modal', NativeModal)
 safeRegisterElement('native-event', NativeEvent)
+safeRegisterElement('infinite-scroll', InfiniteScroll)
 safeRegisterElement('modal-button', ModalButton)
 safeRegisterElement('file-dropzone', FileDropzone)
 safeRegisterElement('menu-active', MenuActive)

app/javascript/elements/infinite_scroll.js

@@ -0,0 +1,41 @@
+import { renderStreamMessage } from '@hotwired/turbo'
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    if (!this.dataset.src) {
+      this.remove()
+
+      return
+    }
+
+    this.observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        this.load()
+      }
+    }, { rootMargin: '400px' })
+
+    this.observer.observe(this)
+  }
+
+  disconnectedCallback () {
+    this.observer?.disconnect()
+  }
+
+  load () {
+    if (this.loading || !this.dataset.src) return
+
+    this.loading = true
+
+    fetch(this.dataset.src, {
+      headers: { 'X-Turbo-Infinite-Scroll': 'true' }
+    }).then(async (response) => {
+      if (!response.ok) return
+
+      delete this.dataset.src
+
+      renderStreamMessage(await response.text())
+    }).finally(() => {
+      this.loading = false
+    })
+  }
+}