Perceived performance

import { useEffect, useState } from 'react';
import { motion } from 'motion/react';

const PAGE_SIZE = 4;
const SKELETON_DELAY_MS = 300; // fast responses skip the loading state

type Post = { id: string; author: string; text: string; avatar: string };

// Posts stream in one by one while `loading` is true. Skeleton rows hold the
// final layout, and each real row fades in at the same size, so nothing jumps.
export function Feed({ posts, loading }: { posts: Post[]; loading: boolean }) {
  const [slow, setSlow] = useState(false);

  useEffect(() => {
    if (!loading) return;
    const timer = setTimeout(() => setSlow(true), SKELETON_DELAY_MS);
    return () => {
      clearTimeout(timer);
      setSlow(false);
    };
  }, [loading]);

  const placeholders =
    loading && slow ? Math.max(PAGE_SIZE - posts.length, 0) : 0;

  return (
    <ul aria-busy={loading} className='flex w-80 flex-col gap-2'>
      {posts.map((post) => (
        <motion.li
          key={post.id}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.2 }}
          className='flex h-16 items-center gap-3 rounded-xl border px-3'
        >
          <img src={post.avatar} alt='' className='size-10 rounded-full' />
          <div className='min-w-0'>
            <p className='text-sm font-medium'>{post.author}</p>
            <p className='truncate text-sm text-muted-foreground'>
              {post.text}
            </p>
          </div>
        </motion.li>
      ))}
      {Array.from({ length: placeholders }, (_, i) => (
        <li
          key={`skeleton-${i}`}
          aria-hidden
          className='flex h-16 animate-pulse items-center gap-3 rounded-xl border px-3'
        >
          <div className='size-10 rounded-full bg-muted' />
          <div className='flex flex-col gap-2'>
            <div className='h-3 w-24 rounded bg-muted' />
            <div className='h-3 w-44 rounded bg-muted' />
          </div>
        </li>
      ))}
    </ul>
  );
}