Jetpack Compose Academy · Lezione

UI di caricamento, successo ed errore

Visualizzi in modo ordinato ogni esito della rete.

UI di caricamento, successo ed errore è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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.

Domande Frequenti

La lezione «UI di caricamento, successo ed errore» è gratuita?

Sì — il testo completo di «UI di caricamento, successo ed errore» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.

Cosa imparerò in «UI di caricamento, successo ed errore»?

Visualizzi in modo ordinato ogni esito della rete. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Jetpack Compose Academy?

Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «UI di caricamento, successo ed errore»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?

Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Jetpack Compose Academy