Loading, Success & Error UI
Render every network outcome cleanly.
Loading, Success & Error UI is a free Jetpack Compose Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Every Request Has Three Outcomes
A network call is either still loading, finished with data, or failed. Great screens show something honest for all three.
Model State With a Sealed Class
A sealed class captures those outcomes as distinct types, so the compiler forces you to handle each case in the UI.
sealed class UiState {
object Loading : UiState()
data class Success(val users: List<User>) : UiState()
data class Error(val message: String) : UiState()
}Start in the Loading State
Initialize your state as Loading so the screen shows a spinner the instant it appears, before any data arrives.
var state by mutableStateOf<UiState>(UiState.Loading)Update on Success
When the call returns, swap the state to Success with the fetched list. Compose recomposes and reveals the content.
state = UiState.Success(api.getUsers())Update on Error
In your catch block, move to the Error state with a friendly message instead of leaving the user stuck on a spinner.
catch (e: Exception) {
state = UiState.Error("Couldn't load users")
}Branch With when
In the Composable, use a when over the state. Each branch renders exactly the right UI for that outcome.
when (val s = state) {
is UiState.Loading -> { }
is UiState.Success -> { }
is UiState.Error -> { }
}Show a Spinner While Loading
For the loading branch, a centered CircularProgressIndicator reassures users that something is happening. ⏳
is UiState.Loading -> CircularProgressIndicator()Render the Data on Success
The success branch reads the list and draws it, usually in a LazyColumn so long results scroll smoothly.
is UiState.Success -> UserList(s.users)Offer a Retry on Error
The error branch should show the message plus a Retry button that re-runs your load function. Failures shouldn't be dead ends.
is UiState.Error -> RetryView(s.message, ::loadUsers)Handle the Empty Case
Success doesn't always mean items. When the list is empty, show a calm empty state rather than a blank screen.
One State Drives the Whole Screen
Because a single state object decides everything, your UI can never show a spinner and data at once. It stays predictable.
Quick Check
Why model loading, success, and error as a sealed class?
Recap: Rendering Every Outcome
You modeled state as a sealed class, branched with when, and showed loading, data, errors, and empties. You can now ship a robust networked screen.
Frequently asked questions
Is the “Loading, Success & Error UI” lesson free?
Yes — the full text of “Loading, Success & Error UI” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Loading, Success & Error UI”?
Render every network outcome cleanly. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Loading, Success & Error UI” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Define a Retrofit API Interface
- Parsing JSON with Moshi
- suspend Calls in the ViewModel
- Loading, Success & Error UI