Jetpack Compose Academy · Lección

Interfaz de carga, éxito y error

Muestre correctamente todos los resultados de la red.

Interfaz de carga, éxito y error es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en 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.

Preguntas frecuentes

¿La lección «Interfaz de carga, éxito y error» es gratis?

Sí — el texto completo de «Interfaz de carga, éxito y error» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Interfaz de carga, éxito y error»?

Muestre correctamente todos los resultados de la red. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Jetpack Compose Academy?

No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Interfaz de carga, éxito y error»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?

Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Jetpack Compose Academy