Find stable loading patterns for route transitions, data fetches, uploads, form actions, and generated content without causing layout shifts.
Open the live component in a new tab to inspect layout and interaction behavior before choosing protected source access.
Structured placeholders for predictable content layouts.
Open live previewButtons that preserve their size and label context while processing.
Open live previewFile progress with active, complete, and error feedback.
Open live previewA determinate progress pattern for measurable tasks.
Open live previewUse immediate feedback for actions that take noticeable time. Skeletons work for predictable content layouts, progress bars work when completion can be measured, and compact spinners work for short actions with clear surrounding context.
Keep dimensions stable so loading content does not shift the page. Prevent duplicate submissions, preserve accessible status text, and provide recovery when an operation takes too long or fails.
Practical answers about framework fit, responsive behavior, accessibility, source access, and implementation.
Use a skeleton when the final layout is predictable and takes time to populate. Use a spinner for short focused operations where a content-shaped placeholder would be misleading.
Immediate actions should feel instant, but any noticeable delay needs feedback. Avoid flashing a skeleton for very fast responses by using a short, carefully tested delay where appropriate.
Only label it clearly as estimated. A determinate percentage should be based on real measurable progress so users are not misled.