Skeleton Screens

Skeleton screens display a wireframe preview of the page structure while content loads, creating the perception of faster loading.

stellae.design

Design Principles

Skeleton screens show a simplified, content-free version of the layout during loading. Instead of a spinner on a blank page, users see grey shapes representing where content will appear. Research shows they reduce perceived load time by up to 50% compared to spinners.

Why It Matters

Skeleton screens display a placeholder outline of the page layout while content loads, replacing traditional spinners with a preview of what is coming. Research shows they reduce perceived wait time by giving users a spatial framework to anchor their attention. This technique makes applications feel faster and more responsive even when actual load times remain unchanged.

Real-World Examples

Facebook's news feed skeleton

Facebook shows gray placeholder blocks shaped like posts, profile pictures, and text lines while the feed loads. The layout matches the final content structure so closely that the transition feels seamless. Users begin scanning the page shape before content fills in, reducing the perception of waiting.

YouTube's video grid loading state

YouTube displays rectangular placeholders with shimmer animations in the exact dimensions of video thumbnails, titles, and channel avatars. As each video's data resolves, the placeholder is replaced individually rather than all at once. This progressive reveal keeps users engaged and oriented.

Counter-example

A skeleton that looks nothing like the loaded page

An application shows a generic skeleton with three uniform rectangles, but the loaded page has a sidebar, hero image, and card grid. The dramatic layout shift when content appears is disorienting and negates the benefits of the skeleton. Skeletons must faithfully represent the page's actual structure.

Role-Specific Guidance

Common Mistakes

• The biggest mistake is creating generic skeleton templates that do not match the actual content layout, causing layout shifts that feel worse than a simple spinner. Teams also overuse skeleton screens for operations that complete in under 200 milliseconds, where the flash of placeholder content adds unnecessary visual noise. Another error is forgetting to provide accessible loading announcements for screen readers, since skeleton visuals alone convey no status to assistive technology.