What is a loading state in UX design?
A loading state is the visual representation of a system processing a request before content or results are ready to display. Every interface has loading states: page loads, data fetches, form submissions, file uploads, and search queries all require time to complete. The design of these states determines whether users feel informed and patient or uncertain and frustrated during the wait. Poor loading states are a primary cause of users assuming a product is broken and abandoning their task.
What are the types of loading states in UX design?
Spinner or activity indicator is an indeterminate animation that communicates activity without showing progress. Use for short operations under two to three seconds where progress cannot be calculated. Skeleton screen shows a structural placeholder matching the layout of incoming content. Use for content loads between one and five seconds to reduce perceived wait time and orient users to the incoming layout. Progress bar shows determinate completion percentage. Use for operations where progress can be accurately calculated, such as file uploads. Optimistic UI updates the interface immediately to show the expected result of an action while the actual processing happens in the background.
How do loading states affect perceived performance?
The Doherty threshold identifies 400 milliseconds as the boundary below which interactions feel instantaneous. Above this threshold, visible loading states become necessary to prevent users from assuming the system has not received their action. Research consistently shows that skeleton screens feel faster than equivalent spinner-based loading, even when actual load times are identical. This happens because skeleton screens communicate what is coming and show structural progress even before content arrives, reducing the psychological weight of the wait.