Back to work
Web Skeleton and Loading UI Guidelines
Choosing what to show while a page waits, instead of defaulting to a spinner
Summer 2025
Loading guidance for short, medium, and long waits
Problem
Developers needed to know what to show while different parts of a page were loading. A single spinner did not explain which section was waiting or how long the wait might be. I mapped loading behavior to the wait, the page, and the KendoReact components we already had.
What I did
- Defined loading patterns for short, medium, and long waits
- Mapped KendoReact loading components to the page sections and states where they fit
- Added feedback in stages as the wait continued
- Documented section-by-section loading so people could use faster parts of a page while others were still waiting
Result
- Gave developers a reference for component choice, placement, and timing
- Documented how the loading state changes as a wait continues
- Set a reusable pattern for later web loading guidance
Process
- Open Figma prototype
Loading UI prototype showing feedback by wait time
Loading workflow from the initial wait through later feedback
Tools
Figma · KendoReact · Design System · UX Strategy