Loading States and UX

Learn to manage loading, success, and error states so your users always know what's happening.

Step 1 of 5

Why Loading States Matter

Network requests take time. Even on a fast connection, fetching data from a server takes at least 50-200 milliseconds. On a slow connection, it could take several seconds. During that time, what does the user see? If the answer is "nothing" — a blank space where data should be — that's a terrible experience. Users won't know if the app is working, frozen, or broken.

Every data-fetching operation should communicate three possible states to the user:

Loading — "We're getting your data, hang on." Show a spinner, skeleton, or "Loading..." text.
Success — "Here's your data!" Replace the loading indicator with the actual content.
Error — "Something went wrong." Show a helpful message, maybe with a retry button.

Think about apps you use. When you open the YouTube app, you see placeholder rectangles where videos will appear (loading state). Then the thumbnails pop in (success state). If your connection drops, you see "No internet connection" with a retry button (error state). This three-state pattern is universal across all well-built web and mobile apps.

Think of it this way: It's like ordering at a restaurant. After you order, the waiter says 'Coming right up!' (loading — acknowledgment). If the food arrives, great (success). If there's a problem, the waiter comes back and explains: 'Sorry, we're out of salmon. Would you like something else?' (error — with a recovery option). The worst experience is when the waiter just disappears and you have no idea what's happening.

Learn more on MDN

Fetch API