Skeleton

When to use

Use for full-page loads lasting 2-10 seconds. Skeleton screens give users a sense of what the page will look like, preventing abandonment.

When not to use

• For quick loads (under 1 second), skip entirely, they cause annoying flashes
• For long waits (over 10 seconds), use ProgressBar with duration estimate
• For partial modules on a loaded page, use ProgressSpinner
• For non-loading processes like uploads and downloads, use ProgressBar

Guidelines

• Match the content shape: Skeletons should mimic the layout of the actual content.
• Use subtle animation: A gentle pulse or shimmer signals loading without distracting.
• Never show a skeleton longer than 10 seconds. Switch to a progress bar or error state.

How it works

PrimeVue Skeleton

Tailwind animate-pulse (our pattern)