Skeleton screen

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

const SHOW_AFTER_MS = 300; // fast loads skip the skeleton, so it never flashes
const BONE = 'rounded-md bg-muted';
const COVER = 'mt-4 h-40 w-full rounded-md object-cover';

type Profile = { name: string; role: string; avatar: string; cover: string };

export function ProfileCard({ profile }: { profile: Profile | null }) {
  const [slow, setSlow] = useState(false);
  const reduceMotion = useReducedMotion();

  useEffect(() => {
    if (profile) return;
    const timer = setTimeout(() => setSlow(true), SHOW_AFTER_MS);
    return () => clearTimeout(timer);
  }, [profile]);

  return (
    <div aria-busy={!profile} className='w-80 rounded-xl border p-4'>
      {profile ? (
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
          <div className='flex items-center gap-3 text-sm'>
            <img src={profile.avatar} alt='' className='size-12 rounded-full' />
            <div>
              <p className='font-medium'>{profile.name}</p>
              <p className='text-muted-foreground'>{profile.role}</p>
            </div>
          </div>
          <img src={profile.cover} alt='' className={COVER} />
        </motion.div>
      ) : (
        slow && (
          // Same layout as the content, so nothing jumps when it arrives.
          <div className='relative overflow-hidden'>
            <div className='flex items-center gap-3'>
              <div className={`size-12 rounded-full ${BONE}`} />
              <div className='flex-1 space-y-2'>
                <div className={`h-3 w-3/5 ${BONE}`} />
                <div className={`h-3 w-2/5 ${BONE}`} />
              </div>
            </div>
            <div className={`${COVER} bg-muted`} />
            {/* One soft highlight sweeps left to right across every block. */}
            {!reduceMotion && (
              <motion.div
                className='absolute inset-0 bg-linear-to-r from-transparent via-background/60 to-transparent'
                animate={{ x: ['-100%', '100%'] }}
                transition={{ duration: 1.5, ease: 'linear', repeat: Infinity }}
              />
            )}
          </div>
        )
      )}
    </div>
  );
}