infinite scroll

src/pages/FeedView.tsx

@@ -3,88 +3,96 @@ import PostsFeed from '../components/PostsFeed.tsx'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import './FeedView.css'
 
-// Stub for spinner component
-const Spinner = () => (
-  <div className="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
-)
-
-const PageSize = 2
+const PageSize = 10
 
 interface FeedViewProps {
   loadPosts: (cursor: string | null, amount: number) => Promise<Post[]>
 }
+
 export default function FeedView({ loadPosts }: FeedViewProps) {
   const [pages, setPages] = useState<Post[][]>([])
-
   const posts = pages.flat()
 
   const [hasMore, setHasMore] = useState(true)
-  const cursor = useRef<string | null>(null)
   const [isLoading, setIsLoading] = useState(false)
 
+  const cursor = useRef<string | null>(null)
   const loading = useRef(false)
+  const sentinelRef = useRef<HTMLDivElement | null>(null)
+
   const loadNextPage = useCallback(async () => {
-    if (loading.current) return
+    if (loading.current || !hasMore) return
     loading.current = true
+    setIsLoading(true)
 
     try {
-      const page = await loadPosts(cursor.current, PageSize)
+      const delay = new Promise((resolve) => setTimeout(resolve, 500)) // minimum delay
+      const pagePromise = loadPosts(cursor.current, PageSize)
 
-      if (page.length < PageSize) {
-        setHasMore(false)
-      }
+      const [page] = await Promise.all([pagePromise, delay]) // wait for both
 
+      if (page.length < PageSize) setHasMore(false)
       cursor.current = page.at(-1)?.postId ?? null
-
       setPages((prev) => [...prev, page])
     } finally {
       loading.current = false
       setIsLoading(false)
     }
-  }, [loadPosts])
+  }, [loadPosts, hasMore])
 
   useEffect(() => {
-    const timeoutId = setTimeout(async () => {
-      await loadNextPage()
-    })
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0]
+        if (entry.isIntersecting) {
+          loadNextPage()
+        }
+      },
+      {
+        root: null,
+        rootMargin: '100px',
+        threshold: 0.1,
+      },
+    )
 
+    const sentinel = sentinelRef.current
+    if (sentinel) observer.observe(sentinel)
     return () => {
-      clearTimeout(timeoutId)
+      if (sentinel) observer.unobserve(sentinel)
     }
   }, [loadNextPage])
 
+  // Ensure content fills viewport after initial render
+  useEffect(() => {
+    const checkContentHeight = async () => {
+      while (
+        document.documentElement.scrollHeight <= window.innerHeight &&
+        hasMore &&
+        !loading.current
+      ) {
+        await loadNextPage()
+      }
+    }
+
+    checkContentHeight()
+  }, [posts.length, loadNextPage, hasMore])
+
   return (
-    <main className={`w-full max-w-full px-12 py-6`}>
-      <div className={`col-start-1`}>
+    <main className="w-full max-w-full px-12 py-6">
+      <div className="col-start-1">
         <PostsFeed posts={posts} />
-        {hasMore && (
-          <LoadMoreButton state={isLoading ? 'loading' : 'ready'} onClick={loadNextPage} />
+        {isLoading && (
+          <div className="w-full flex justify-center py-4">
+            <Spinner />
+          </div>
         )}
+        <div ref={sentinelRef} className="h-1" />
       </div>
     </main>
   )
 }
 
-interface LoadMoreButtonProps {
-  state: 'ready' | 'loading'
-  onClick: () => void
-}
-
-function LoadMoreButton({ state, onClick }: LoadMoreButtonProps) {
-  const buttonClasses =
-    'w-full py-3 px-4 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-md flex items-center justify-center disabled:opacity-70'
-  switch (state) {
-    case 'loading':
-      return (
-        <button disabled={true} className={buttonClasses}>
-          <Spinner />
-        </button>
-      )
-    case 'ready':
-      return (
-        <button className={buttonClasses} onClick={onClick}>
-          Load more
-        </button>
-      )
-  }
-}
+// Spinner component
+const Spinner = () => (
+  <div className="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
+)