Shimmer & Placeholder Loading: Skeleton UI and Loading Animations

Skeleton loaders provide visual feedback while content loads, improving perceived performance and user experience.

Basic Skeleton UI with Compose

fun SkeletonLoader() {
    Column(modifier = Modifier.padding(16.dp)) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp)
                .background(Color.Gray)
        )
        Spacer(modifier = Modifier.height(8.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth(0.8f)
                .height(20.dp)
                .background(Color.Gray)
        )
    }
}

Shimmer Animation

val shimmerColors = listOf(
    Color.LightGray.copy(alpha = 0.6f),
    Color.LightGray,
    Color.LightGray.copy(alpha = 0.6f)
)

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .background(
            brush = Brush.linearGradient(
                colors = shimmerColors,
                start = Offset(0f, 0f),
                end = Offset(400f, 0f)
            )
        )
)

With Loading State

val isLoading by viewModel.isLoading.collectAsState()

if (isLoading) {
    SkeletonLoader()
} else {
    ContentView(data)
}

Skeleton screens bridge the gap between request and content, creating smooth loading experiences that users appreciate.

---

8 Android app templates available on Gumroad