Пользовательский интерфейс загрузки, успеха и ошибки
Корректно отображайте любой результат сетевого запроса.
«Пользовательский интерфейс загрузки, успеха и ошибки» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
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.
Часто задаваемые вопросы
Урок «Пользовательский интерфейс загрузки, успеха и ошибки» бесплатный?
Да — полный текст урока «Пользовательский интерфейс загрузки, успеха и ошибки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «Пользовательский интерфейс загрузки, успеха и ошибки»?
Корректно отображайте любой результат сетевого запроса. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Пользовательский интерфейс загрузки, успеха и ошибки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Определение интерфейса API Retrofit
- Разбор JSON с Moshi
- Вызовы suspend в ViewModel
- Пользовательский интерфейс загрузки, успеха и ошибки