I'd like to create a progress button, where the text is replaced with a circular progress when it is...

# compose

[Carl Benson]

I'd like to create a progress button, where the text is replaced with a circular progress when it is in a loading state, but I don't seem to be able make it work. I would like the button to keep its size when the loading progress is showing, does it mean I would have to do my own measurements? code and current state in 🧵

[Carl Benson]

[Carl Benson]

@Composable
fun ProgressButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    loading: Boolean = false,
    content: @Composable RowScope.() -> Unit
) {
    if (loading) {
        Box(
            modifier = modifier
                .defaultMinSize(minWidth = ButtonDefaults.MinWidth)
                .height(ButtonDefaults.MinHeight)
                .background(color = MaterialTheme.colors.primary)
                .padding(4.dp),
           contentAlignment = Alignment.Center
        ) {
            CircularProgressIndicator(
                color = MaterialTheme.colors.onPrimary
            )
        }
    } else Button(onClick = onClick, modifier = modifier, enabled = enabled, content = content)
}

[Slava Glushenkov]

Seems there are two ways.
1. Make button width not depending of content inside. Fixed .dp or some kind of Row/Column with weights.
2. Make fixed width button content and just play with it. Change image content inside and/or make it visible/invisible.

[Carl Benson]

thanks for your suggestions, button width can't be fixed since it will depend on content. I somehow need to know what the size of the button will be and then set that to the box that holds the progress indicator

[Slava Glushenkov]

I suggest use same button with icon all the time but change icon (possible with animation if need for progress) depending on state.

[Carl Benson]

solved it with

onGloballyPositioned

modifier on the button, and let the progress Box size use that size