Loading state

type Message = { id: string; from: string; preview: string };

// Wire these to your data hook, such as React Query's useQuery.
type Props = {
  status: 'pending' | 'error' | 'success';
  messages?: Message[];
  onRetry: () => void;
};

export function MessagesCard({ status, messages = [], onRetry }: Props) {
  return (
    // A fixed height keeps the card from jumping between states.
    <section
      aria-busy={status === 'pending'}
      className='grid h-56 w-80 rounded-2xl border p-4 text-sm'
    >
      {status === 'pending' && (
        // Fades in after 200ms, so fast responses never flash a skeleton.
        <div className='space-y-4 transition-opacity delay-200 starting:opacity-0'>
          {[0, 1, 2].map((row) => (
            <div key={row} className='flex gap-3 motion-safe:animate-pulse'>
              <div className='size-10 rounded-full bg-muted' />
              <div className='h-10 flex-1 rounded-lg bg-muted' />
            </div>
          ))}
        </div>
      )}
      {status === 'error' && (
        <div className='place-self-center text-center'>
          <p>Couldn't load messages.</p>
          <button
            type='button'
            onClick={onRetry}
            className='mt-3 rounded-lg border px-3 py-1.5 font-medium hover:bg-muted'
          >
            Try again
          </button>
        </div>
      )}
      {status === 'success' && messages.length === 0 && (
        <div className='place-self-center text-center'>
          <p className='font-medium'>No messages yet</p>
          <p className='text-muted-foreground'>
            New conversations show up here.
          </p>
        </div>
      )}
      {status === 'success' && messages.length > 0 && (
        <ul className='space-y-3'>
          {messages.map((message) => (
            <li key={message.id} className='truncate'>
              <span className='font-medium'>{message.from}</span>{' '}
              {message.preview}
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}