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>
   )