Loading and Errors
75%
Lesson 6 of 8

Loading and Errors

A good AI app communicates waiting, failure and retry states instead of leaving the user guessing.

Active reading
Why this matters

A good AI app communicates waiting, failure and retry states instead of leaving the user guessing.

Loading

Show that work is in progress.

Error

Explain what failed in plain language.

Retry

Offer a safe next action.

Understand the working model

Model requests can take longer than normal API calls. Disable duplicate submission while a request is active, show a clear progress state and preserve the user’s input if the request fails.

Map technical errors to useful user messages. A timeout, rate limit and invalid input need different recovery actions even if they all look like “request failed” internally.

Example
State: idle → loading → success. On timeout: show “This is taking longer than expected” + Retry. On validation error: highlight the input that needs fixing.
Practice

Apply the pattern above to one real task you already do. Keep the first version small enough that you can inspect every input and output.

Common mistake

Do not clear the user’s work just because an API request failed.

Key takeaway

Design loading and error states as part of the product, not as an afterthought.

Next lesson

Add Files or Images

Continue to the next lesson.

Continue →