Interface de Carregamento, Sucesso e Erro
Renderize claramente todos os resultados da rede.
Interface de Carregamento, Sucesso e Erro é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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.
Perguntas Frequentes
A aula “Interface de Carregamento, Sucesso e Erro” é grátis?
Sim — o texto completo de “Interface de Carregamento, Sucesso e Erro” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “Interface de Carregamento, Sucesso e Erro”?
Renderize claramente todos os resultados da rede. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Interface de Carregamento, Sucesso e Erro”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Definindo uma Interface de API Retrofit
- Analisando JSON com Moshi
- Chamadas suspend no ViewModel
- Interface de Carregamento, Sucesso e Erro