Hello, I've got a button that wraps an Image and T...

# compose

[galex]

Hello, I've got a button that wraps an Image and Text, and onClick those two are replaced with a ProgressBar.
Now, when the ProgressBar shows up, the button wraps it so the size changes in between those two sets of content.
What's the best way to not let the button get smaller and keep the original size of the Image + Text and center the ProgressBar in that extra space?

[galex]

I've tried nothing and I'm out of ideas.... Just kidding, I managed to get to the expected result by keeping the content (Image + Text) and adding a container and playing with its alpha:

Box {
    val showLoader = state == ButtonMainState.Loader

    Row(modifier = Modifier.alpha(if (showLoader) 0f else 1f)) {
        val color =
            when {
                enabled.not() -> style.disabledContentColor
                else -> style.idleContentColor
            }

        icon?.let {
            Image(
                painter = painterResource(id = it),
                contentDescription = iconContentDescription,
                colorFilter = ColorFilter.tint(color),
                modifier = Modifier.size(16.dp)
            )
            Spacer(modifier = Modifier.width(8.dp))
        }

        Text(
            text = text,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            style = size.textStyle,
            color = color
        )
    }

    if (showLoader) {
        SomeProgressBar(
            modifier = Modifier.size(size.loaderSize).align(Alignment.Center),
        )
    }
}

Any better approach would be greatly welcomed 😊

[Alex Vanyo]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1673311120934409 has a pretty similar use case!

The downside of alpha is that it leaves all of that content in place semantically, which isn’t quite optimal, but that’s on the right track to a solution. If you instead measure (but don’t place), you can keep the size the same while preventing the content from being in the semantic tree.

[galex]

@Alex Vanyo Thank you, that modifier is so simple yet so elegant, I love it!