What are skeleton screens and how do they affect perceived performance?

A skeleton is a static or lightly animated block layout that shows where the title, text, and images will load, instead of a white screen (uncertain wait) or a single centered spinner (no sense of what is coming). They improve perceived performance: users feel the app is 'working' and understand structure a moment before pixels arrive. They are not a substitute for true slow APIs: you should still fix slow endpoints. Pair with `prefers-reduced-motion` and never block interaction if content is not ready, unless the UI requires it. For very fast loads, a skeleton that flashes for 50ms can be worse than a quick paint - tune with thresholds in code.

{isLoading && <Skeleton className='h-8 w-2/3' />}
{!isLoading && <h1>{title}</h1>}
// mirror final layout, not a random box

Start simple: try this concept in a tiny project before moving to advanced tools.