Defer profile favourites until needed

resources/js/lib/useLazyProfileFavourites.js

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export default function useLazyProfileFavourites({ username, initialFavourites, enabled }) {
+  const hasInitialValue = initialFavourites !== null && initialFavourites !== undefined
+  const initialItems = Array.isArray(initialFavourites)
+    ? initialFavourites
+    : (initialFavourites?.data ?? [])
+  const [items, setItems] = useState(() => initialItems)
+  const [nextCursor, setNextCursor] = useState(() => initialFavourites?.next_cursor ?? null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+  const requestKeyRef = useRef(username)
+  const requestedRef = useRef(hasInitialValue)
+  const abortRef = useRef(null)
+
+  useEffect(() => {
+    if (requestKeyRef.current === username) return undefined
+
+    abortRef.current?.abort()
+    abortRef.current = null
+    requestKeyRef.current = username
+    requestedRef.current = false
+    setItems([])
+    setNextCursor(null)
+    setLoading(false)
+    setError(false)
+    return undefined
+  }, [username])
+
+  useEffect(() => {
+    if (requestKeyRef.current !== username || !hasInitialValue) return undefined
+
+    abortRef.current?.abort()
+    abortRef.current = null
+    requestedRef.current = true
+    setItems(initialItems)
+    setNextCursor(initialFavourites?.next_cursor ?? null)
+    setLoading(false)
+    setError(false)
+    return undefined
+  }, [hasInitialValue, initialFavourites, initialItems, username])
+
+  const load = useCallback(async () => {
+    if (!enabled || hasInitialValue || requestedRef.current || !username) return
+
+    requestedRef.current = true
+    const controller = new AbortController()
+    const requestKey = requestKeyRef.current
+    abortRef.current = controller
+    setLoading(true)
+    setError(false)
+
+    try {
+      const response = await fetch(`/api/profile/${encodeURIComponent(username)}/favourites`, {
+        headers: { Accept: 'application/json' },
+        credentials: 'same-origin',
+        signal: controller.signal,
+      })
+      if (!response.ok) throw new Error('Favourites could not be loaded.')
+      const payload = await response.json()
+      if (requestKey !== requestKeyRef.current || controller.signal.aborted) return
+      setItems(Array.isArray(payload?.data) ? payload.data : [])
+      setNextCursor(payload?.next_cursor ?? null)
+    } catch (caught) {
+      if (caught?.name === 'AbortError' || requestKey !== requestKeyRef.current) return
+      requestedRef.current = false
+      setError(true)
+    } finally {
+      if (requestKey === requestKeyRef.current) {
+        abortRef.current = null
+        setLoading(false)
+      }
+    }
+  }, [enabled, hasInitialValue, username])
+
+  useEffect(() => {
+    if (enabled) load()
+  }, [enabled, load])
+
+  useEffect(() => () => abortRef.current?.abort(), [])
+
+  return { items, nextCursor, loading, error, retry: load }
+}