react when visible

Author: joetannenbaum

packages/react/src/WhenVisible.ts

@@ -0,0 +1,102 @@
+import { ReloadOptions, router } from '@inertiajs/core'
+import { createElement, ReactChild, useEffect, useRef, useState } from 'react'
+
+interface WhenVisibleProps {
+  children: ReactChild
+  fallback: ReactChild
+  data: string | string[]
+  params?: ReloadOptions
+  buffer?: number
+  elementTag?: string
+  once?: boolean
+}
+
+const WhenVisible = ({ children, data, params, buffer, elementTag, once, fallback }: WhenVisibleProps) => {
+  once = once ?? true
+  elementTag = elementTag ?? 'div'
+  fallback = fallback ?? null
+
+  const [loaded, setLoaded] = useState(false)
+  const [fetching, setFetching] = useState(false)
+  const observer = useRef<IntersectionObserver | null>(null)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const getReloadParams = (): Partial<ReloadOptions> => {
+    if (data) {
+      return {
+        only: (Array.isArray(data) ? data : [data]) as string[],
+      }
+    }
+
+    if (!params) {
+      throw new Error('You must provide either a `data` or `params` prop.')
+    }
+
+    return params
+  }
+
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    observer.current = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0].isIntersecting) {
+          return
+        }
+
+        if (once) {
+          observer.current?.disconnect()
+        }
+
+        if (fetching) {
+          return
+        }
+
+        setFetching(true)
+
+        const reloadParams = getReloadParams()
+
+        router.reload({
+          ...reloadParams,
+          onStart: (e) => {
+            setFetching(true)
+            reloadParams.onStart?.(e)
+          },
+          onFinish: (e) => {
+            setLoaded(true)
+            setFetching(false)
+            reloadParams.onFinish?.(e)
+          },
+        })
+      },
+      {
+        rootMargin: `${buffer || 0}px`,
+      },
+    )
+
+    observer.current.observe(ref.current)
+
+    return () => {
+      observer.current?.disconnect()
+    }
+  }, [ref])
+
+  if (!once || !loaded) {
+    return createElement(
+      elementTag,
+      {
+        props: null,
+        ref,
+      },
+      loaded ? children : fallback,
+    )
+  }
+
+  return loaded ? children : null
+}
+
+WhenVisible.displayName = 'InertiaWhenVisible'
+
+export default WhenVisible

packages/react/src/index.ts

@@ -9,3 +9,4 @@ export { default as useForm } from './useForm'
 export { default as usePage } from './usePage'
 export { default as usePoll } from './usePoll'
 export { default as useRemember } from './useRemember'
+export { default as WhenVisible } from './WhenVisible'

packages/react/test-app/Pages/WhenVisible.jsx

@@ -1,29 +1,27 @@
-import { Suspense } from 'react'
-
-const Foo = ({ label, once }) => {
-  const { foo } = useWhenVisible('foo')
+import { WhenVisible } from '@inertiajs/react'
 
+const Foo = ({ label }) => {
   return <div>{label}</div>
 }
 
 export default () => (
   <>
-    <div style="margin-top: 5000px">
-      <Suspense fallback={<div>Loading first one...</div>}>
+    <div style={{ marginTop: '5000px' }}>
+      <WhenVisible data="foo" fallback={<div>Loading first one...</div>}>
         <Foo label="First one is visible!" />
-      </Suspense>
+      </WhenVisible>
     </div>
 
-    <div style="margin-top: 5000px">
-      <Suspense fallback={<div>Loading second one...</div>}>
+    <div style={{ marginTop: '5000px' }}>
+      <WhenVisible buffer={1000} data="foo" fallback={<div>Loading second one...</div>}>
         <Foo label="Second one is visible!" />
-      </Suspense>
+      </WhenVisible>
     </div>
 
-    <div style="margin-top: 5000px">
-      <Suspense fallback={<div>Loading third one...</div>}>
+    <div style={{ marginTop: '5000px' }}>
+      <WhenVisible data="foo" once={false} fallback={<div>Loading third one...</div>}>
         <Foo label="Third one is visible!" once={false} />
-      </Suspense>
+      </WhenVisible>
     </div>
   </>
 )