Jetpack Compose: Loading and Placeholder States

In modern Android development using Jetpack Compose, managing loading and placeholder states effectively enhances the user experience significantly. Users expect responsive and informative UIs, and implementing proper loading and placeholder mechanisms ensures they are not left in the dark while waiting for data to load or when data is temporarily unavailable.

Understanding Loading and Placeholder States

• Loading State: Represents the period when data is being fetched or processed. Displaying a loading indicator during this time informs users that the app is actively working.
• Placeholder State: Shows a temporary UI in place of actual content when data is not yet available. This can include grayed-out or simplified versions of the expected content.

Why Implement Loading and Placeholder States?

• Improved User Experience: Provides visual feedback to users, reducing frustration.
• Enhanced Perceived Performance: Makes the app feel faster by immediately showing something on the screen.
• Clear Communication: Informs users about the state of the application, whether it’s loading, empty, or has content.

Implementing Loading States in Jetpack Compose

Basic Loading Indicator

The simplest way to indicate loading is by displaying a CircularProgressIndicator:

import androidx.compose.material.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun LoadingIndicator() {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(60.dp)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun LoadingIndicatorPreview() {
    LoadingIndicator()
}

Conditional Display of Loading Indicator

To show the loading indicator only when data is loading, use a conditional statement:

import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay

@Composable
fun ConditionalLoadingIndicator() {
    var isLoading by remember { mutableStateOf(true) }

    // Simulate data loading delay
    LaunchedEffect(key1 = true) {
        delay(3000)
        isLoading = false
    }

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        if (isLoading) {
            LoadingIndicator()
        } else {
            Text("Data Loaded!")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ConditionalLoadingIndicatorPreview() {
    ConditionalLoadingIndicator()
}

Implementing Placeholder States in Jetpack Compose

Simple Placeholder UI

A placeholder can be a simple grayed-out box resembling the eventual content:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun PlaceholderUI() {
    Surface(
        modifier = Modifier
            .width(200.dp)
            .height(100.dp)
            .background(Color.LightGray)
    ) {}
}

@Preview(showBackground = true)
@Composable
fun PlaceholderUIPreview() {
    PlaceholderUI()
}

Advanced Placeholder UI

For a more advanced placeholder, create a skeleton of the UI, mimicking the structure of the final content:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun AdvancedPlaceholderUI() {
    Row(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        // Circular avatar placeholder
        Box(
            modifier = Modifier
                .size(50.dp)
                .clip(CircleShape)
                .background(Color.LightGray)
        )
        
        Spacer(modifier = Modifier.width(16.dp))
        
        // Content placeholders
        Column {
            Box(
                modifier = Modifier
                    .height(20.dp)
                    .width(150.dp)
                    .background(Color.LightGray)
            )
            Spacer(modifier = Modifier.height(8.dp))
            Box(
                modifier = Modifier
                    .height(20.dp)
                    .width(100.dp)
                    .background(Color.LightGray)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun AdvancedPlaceholderUIPreview() {
    AdvancedPlaceholderUI()
}

Conditional Display of Placeholder UI

Like the loading indicator, the placeholder should be shown only when data is not yet available:

import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay

@Composable
fun ConditionalPlaceholderUI() {
    var dataLoaded by remember { mutableStateOf(false) }

    // Simulate data loading delay
    LaunchedEffect(key1 = true) {
        delay(3000)
        dataLoaded = true
    }

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        if (!dataLoaded) {
            AdvancedPlaceholderUI()
        } else {
            Text("Data Loaded!")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ConditionalPlaceholderUIPreview() {
    ConditionalPlaceholderUI()
}

Using States and Data Streams

For more complex scenarios, use Kotlin Flow or LiveData to manage your data streams and update the UI accordingly. Here’s an example using StateFlow:

import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow

// Data State sealed class
sealed class DataState {
    object Loading : DataState()
    data class Success(val data: String) : DataState()
    object Error : DataState()
}

// ViewModel to simulate data loading
class MyViewModel {
    private val _dataState = MutableStateFlow(DataState.Loading)
    val dataState: StateFlow<DataState> = _dataState

    suspend fun loadData() {
        delay(3000) // Simulate network delay
        _dataState.value = DataState.Success("Data Loaded from ViewModel")
    }
}

@Composable
fun DataLoadingScreen(viewModel: MyViewModel) {
    val dataState by viewModel.dataState.collectAsState()

    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        when (dataState) {
            is DataState.Loading -> {
                CircularProgressIndicator(modifier = Modifier.size(60.dp))
            }
            is DataState.Success -> {
                Text(text = (dataState as DataState.Success).data)
            }
            is DataState.Error -> {
                Text(text = "Error loading data.")
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DataLoadingScreenPreview() {
    val viewModel = MyViewModel()
    LaunchedEffect(key1 = true) {
        viewModel.loadData()
    }
    DataLoadingScreen(viewModel = viewModel)
}

In this example:

• DataState is a sealed class representing the possible states of data loading.
• MyViewModel uses StateFlow to hold and emit the current data state.
• The Compose UI observes the dataState and updates the UI based on its value.

Conclusion

Implementing loading and placeholder states in Jetpack Compose is crucial for providing a smooth and informative user experience. By conditionally displaying loading indicators and placeholder UIs, you can ensure that your app feels responsive and keeps users engaged while waiting for data. Whether using simple indicators or complex state management, these techniques contribute significantly to the overall quality of your Android application.