Checkout Progress Indicator¶

The checkout progress indicator is a UI modifying component that visually represents the progress of an event or operation. This modifier displays a progress indicator until a user-defined event occurs. There are two kinds of checkout indicators: a partial loading indicator and full page loading indicator. The partial Loading Indicator is shown for the part of the composable screen where it is used, while the full page loading indicator is used for the entire screen of the composable code.

Same Page Loading Indicator¶

To use this feature, include your composable page code with SamePageLoadingLayout as shown in the example snippet below.

This API is defined as:

@Composable
fun PartialLoadingLayout(inProgress: MutableState<Boolean>, modifier: Modifier = Modifier, content: @Composable () -> Unit)

inProgress: If the value of inProgress is true, the progress indicator will be shown, otherwise the content will be shown.
modifier: Modifier to be passed.
content: The enclosed composable content.

Usage of Same Page Loading¶

//Sample code that mimics the progress operation
class SamePageLoadingLayout(var isLoading : MutableState<Boolean>) {

    @Composable
    fun loadData()  {
        isLoading.value = true
        LaunchedEffect(Unit) {
            var ticks: Int = 0
            while (ticks < 10) {
                delay(1.seconds)
                ticks++
            }
            isLoading.value = false
        }

    }
}

//Create a mutable observable state
val isinProgress = remember { mutableStateOf(true)}
InProgressProcess(isinProgress).loadData()
SamePageLoadingLayout(isinProgress, messageText = "Processing") {
    //Your composable code for the page
}

Full page loading

Partial Loading Indicator¶

To use this feature, include your composable page code with PartialLoadingLayout as shown in the example snippet below.

`PartialLoadingLayout` API¶

@Composable
fun PartialLoadingLayout(inProgress: MutableState<Boolean>, modifier: Modifier = Modifier, content: @Composable () -> Unit)

inProgress: If the value of inProgress is true, the progress indicator will be shown, otherwise the content will be shown.
modifier: Modifier to be passed.
content: The enclosed composable content.

Usage of Partial Loading Indicator¶

//Sample code that mimics the progress operation
class InProgressProcess(var isLoading : MutableState<Boolean>) {

    @Composable
    fun loadData()  {
        isLoading.value = true
        LaunchedEffect(Unit) {
            var ticks: Int = 0
            while (ticks < 10) {
                delay(1.seconds)
                ticks++
            }
            isLoading.value = false
        }

    }
}

//Create a mutable observable state
val isinProgress = remember { mutableStateOf(true)}
InProgressProcess(isinProgress).loadData()
PartialLoadingLayout(isinProgress, messageText = "Processing") {
    //Your composable code for the composable unit that needs checkout progress
}