Skeleton Screen

ELI5 — The Vibe Check

A skeleton screen is that gray placeholder layout you see before content loads — the ghostly outlines of cards, text lines, and avatars that show you where things WILL be. It's way better than a spinner because it tells your brain 'stuff is coming, and here's what it'll look like.' Users perceive the page as loading faster even though the actual load time is the same. It's a psychological trick, and it works.

Real Talk

Skeleton screens (also called content placeholders or shimmer loading) are UI patterns that display an approximation of the page layout using placeholder shapes before content loads. They reduce perceived load time by providing spatial context and progressive visual feedback. Typically implemented with CSS animations (pulse/shimmer effects) on gray placeholder elements that match the dimensions of the actual content.

Show Me The Code

.skeleton {
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-title { height: 24px; width: 60%; }
.skeleton-text { height: 16px; width: 100%; margin-top: 8px; }

When You'll Hear This

"Show a skeleton screen while the API loads — don't use a spinner." / "Skeleton screens make the app feel instant even on slow connections."