What is the correct way/approach to disable the background interaction when progress bar is active.
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
// Some content (when anyState is true, disable screen interaction)
if(anyState){
MaterialCircularProgressIndicator()
}
}
You need an other box, which you can fill with a translucent background(I prefer doing so user understand why his touches are not working), and you can interrupt touches with pointerInput. This is exactly same technique Compose uses to block touches under the Surface.
if(anyState){
Box(
Modifier
.fillMaxSize()
.background(Color.Black.copy(alpha = 0.3f))
.pointerInput(Unit) {}
)
CircularProgressIndicator()
}
This worked out for me.
if (anyState) {
Box(modifier = Modifier
.fillMaxSize()
.clickable(
indication = null, // disable ripple effect
interactionSource = remember { MutableInteractionSource() },
onClick = { }
),
contentAlignment = Alignment.Center
) {
CircularProgressIndicator()
}
}
You should a add clickable() modifier to the Box when any state is true.
Box(
modifier = Modifier
.fillMaxSize()
.let {
return@let if (anyState) {
it.clickable {}
} else it
},
contentAlignment = Alignment.Center
) {
MaterialCircularProgressIndicator()
}