Contentment: Smoother loading states in Jetpack Compose
We’ve all seen it: a network request finishes so fast that the loading spinner just flashes on the screen for a split second. It feels unpolished and jittery.
In the old View system, we had ContentLoadingProgressBar to handle this. For Jetpack Compose, I built Contentment.
The Problem
When a UI state transitions from Loading to Loaded almost instantly, the user sees a “flicker.” To fix this, you need two things:
- A delay: Don’t show the loader unless the work takes longer than, say, 500ms.
- A minimum display time: If the loader is shown, keep it there long enough (e.g., 700ms) so the transition doesn’t feel abrupt.
The Solution
Contentment wraps your UI states and manages these timers automatically.
Contentment(
minShowTimeMillis = 700L,
delayMillis = 500L
) {
when (uiState) {
is Loading -> indicator { CircularProgressIndicator() }
is Loaded -> content { ScreenContent(uiState) }
is Error -> content { ErrorState() }
}
}
It’s a tiny addition to a project, but it makes the final UX feel much more stable.
You can find the source and implementation details on GitHub .