changes

src/components/PostItem.tsx

@@ -1,11 +1,13 @@
 import { Post } from '../model/posts/posts.ts'
 import { Link } from 'react-router'
+import { useEffect, useState } from 'react'
 
 interface PostItemProps {
   post: Post
+  index: number
 }
 
-export default function PostItem({ post }: PostItemProps) {
+export default function PostItem({ post, index }: PostItemProps) {
   const formattedDate = post.createdAt.toLocaleString('en-US', {
     year: 'numeric',
     month: 'short',
@@ -14,8 +16,23 @@ export default function PostItem({ post }: PostItemProps) {
     minute: '2-digit',
   })
 
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setVisible(true))
+    return () => clearTimeout(timeout)
+  }, [])
+
+  const opacity = visible ? 'opacity-100' : 'opacity-0'
+
+  const delayMs = index * 100
+
   return (
-    <article className="w-full p-4" key={post.postId}>
+    <article
+      className={`w-full p-4 ${opacity} transition-opacity duration-500`}
+      style={{ transitionDelay: `${delayMs}ms` }}
+      key={post.postId}
+    >
       <div className="text-sm text-gray-500 mb-3">
         <Link to={`/u/${post.authorName}`} className="text-gray-400 hover:underline mr-2">
           @{post.authorName}

src/components/PostsList.tsx

@@ -2,14 +2,18 @@ import { Post } from '../model/posts/posts.ts'
 import PostItem from './PostItem'
 
 interface PostsFeedProps {
-  posts: Post[]
+  pages: Post[][]
 }
 
-export default function PostsList({ posts }: PostsFeedProps) {
+export default function PostsList({ pages }: PostsFeedProps) {
+  return <div className="flex flex-col gap-6 w-full">{pages.map(renderPage)}</div>
+}
+
+function renderPage(posts: Post[]) {
   return (
     <div className="flex flex-col gap-6 w-full">
-      {posts.map((post) => (
-        <PostItem key={post.postId} post={post} />
+      {posts.map((post, idx) => (
+        <PostItem key={post.postId} post={post} index={idx} />
       ))}
     </div>
   )

src/pages/AuthorPage.tsx

@@ -2,7 +2,6 @@ import { useCallback } from 'react'
 import { useParams } from 'react-router'
 import { loadPostsForAuthor } from '../api/api.ts'
 import { Post } from '../model/posts/posts.ts'
-import './FeedView.css'
 import FeedView from './FeedView.tsx'
 
 export default function AuthorPage() {

src/pages/FeedView.css

@@ -1,6 +0,0 @@
-@media (width >= 48rem) {
-    main {
-        display: grid;
-        grid-template-columns: 1.618fr 1fr;
-    }
-}

src/pages/FeedView.tsx

@@ -1,7 +1,6 @@
 import { Post } from '../model/posts/posts.ts'
 import PostsList from '../components/PostsList.tsx'
 import { useCallback, useRef, useState } from 'react'
-import './FeedView.css'
 import { useIntersectionLoad } from '../hooks/useIntersectionLoad.ts'
 
 const PageSize = 20
@@ -12,10 +11,7 @@ interface FeedViewProps {
 
 export default function FeedView({ loadPosts }: FeedViewProps) {
   const [pages, setPages] = useState<Post[][]>([])
-  const posts = pages.flat()
-
   const [hasMore, setHasMore] = useState(true)
-  const [isLoading, setIsLoading] = useState(false)
 
   const cursor = useRef<string | null>(null)
   const loading = useRef(false)
@@ -24,7 +20,6 @@ export default function FeedView({ loadPosts }: FeedViewProps) {
   const loadNextPage = useCallback(async () => {
     if (loading.current || !hasMore) return
     loading.current = true
-    setIsLoading(true)
 
     try {
       const delay = new Promise((resolve) => setTimeout(resolve, 500))
@@ -35,27 +30,16 @@ export default function FeedView({ loadPosts }: FeedViewProps) {
       setPages((prev) => [...prev, page])
     } finally {
       loading.current = false
-      setIsLoading(false)
     }
   }, [loadPosts, hasMore])
 
   useIntersectionLoad(loadNextPage, sentinelRef)
   return (
-    <main className="w-full max-w-full px-12 py-6">
-      <div className="col-start-1">
-        <PostsList posts={posts} />
-        {isLoading && (
-          <div className="w-full flex justify-center py-4">
-            <Spinner />
-          </div>
-        )}
+    <main className="w-full flex justify-center">
+      <div className="max-w-3xl">
+        <PostsList pages={pages} />
         <div ref={sentinelRef} className="h-1" />
       </div>
     </main>
   )
 }
-
-// Spinner component
-const Spinner = () => (
-  <div className="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
-)

src/pages/HomePage.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from 'react'
 import { Post } from '../model/posts/posts.ts'
-import './FeedView.css'
 import { loadPublicFeed } from '../api/api.ts'
 import FeedView from './FeedView.tsx'