idk

src/pages/FeedView.tsx

@@ -21,13 +21,11 @@ export default function FeedView({ loadPosts }: FeedViewProps) {
   const [hasMore, setHasMore] = useState(true)
   const cursor = useRef<string | null>(null)
   const [isLoading, setIsLoading] = useState(false)
-  const loading = useRef(false)
 
+  const loading = useRef(false)
   const loadNextPage = useCallback(async () => {
     if (loading.current) return
-
     loading.current = true
-    setIsLoading(true)
 
     try {
       const page = await loadPosts(cursor.current, PageSize)
@@ -40,8 +38,8 @@ export default function FeedView({ loadPosts }: FeedViewProps) {
 
       setPages((prev) => [...prev, page])
     } finally {
-      setIsLoading(false)
       loading.current = false
+      setIsLoading(false)
     }
   }, [loadPosts])
 
@@ -55,20 +53,20 @@ export default function FeedView({ loadPosts }: FeedViewProps) {
     }
   }, [loadNextPage])
 
-  const loadButtonState = isLoading ? 'loading' : hasMore ? 'ready' : 'done'
-
   return (
     <main className={`w-full max-w-full px-12 py-6`}>
       <div className={`col-start-1`}>
         <PostsFeed posts={posts} />
-        <LoadMoreButton state={loadButtonState} onClick={loadNextPage} />
+        {hasMore && (
+          <LoadMoreButton state={isLoading ? 'loading' : 'ready'} onClick={loadNextPage} />
+        )}
       </div>
     </main>
   )
 }
 
 interface LoadMoreButtonProps {
-  state: 'ready' | 'loading' | 'done'
+  state: 'ready' | 'loading'
   onClick: () => void
 }
 
@@ -76,8 +74,6 @@ 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 'done':
-      return <div className="text-center text-gray-400 py-4">that's all...</div>
     case 'loading':
       return (
         <button disabled={true} className={buttonClasses}>