Is there a way to not resize the button content when we simply place a CirculerProgress inside ?

# compose

[Pedro Alberto]

Is there a way to not resize the button content when we simply place a CirculerProgress inside ?

[Stylianos Gakis]

Can you share a video?

[Chris Sinco [G]]

Button by default sizes to content, so you’ll have to set a fixed width/height with Modifiers

[Pedro Alberto]

Then if we make the fixed width the text can be trimmed. What I want is that after the button gets its content i.e. so text and icon. I can simply add a loading indicator without the button resizing when I set Loading true.
I already have fixed height and that’s ok but I don’t want buttons to have fixed width since they are part of our design system they need to be flexible to be use in many places.

[Stylianos Gakis]

So you say you want the button not to resize and then you say you want the button to adapt its width. That's why I said giving us a video is probably a good idea, of what is happening and what you'd expect to happen.

[Pedro Alberto]

Screen Recording 2022-10-28 at 13.09.12.mov

[Pedro Alberto]

like this

[Stylianos Gakis]

Yeah so this looks like there’s no resizing. So you’ve managed to do what you’re trying to do or am I misunderstanding something?

[Pedro Alberto]

yes I did it using

val widthButtonCached = remember { mutableStateOf(width) }
        val density = LocalDensity.current

.defaultMinSize(minHeight = height, minWidth = widthButtonCached.value)
.onGloballyPositioned {
    if (widthButtonCached.value == Dp.Unspecified)
        widthButtonCached.value = with(density) { it.size.width.toDp() }
}

now the question is this ok in terms or performance?

[Pedro Alberto]

and this only works if the initial state of the button isn’t loading

[Pedro Alberto]

Screen Recording 2022-10-28 at 13.25.30.mov

[Pedro Alberto]

I DID IT 🙂

[Pedro Alberto]

actually without litneing but it will have one layer

[Pedro Alberto]

so I have a Box where I place the button

[Stylianos Gakis]

There’s various alternatives here
• Make the button centered to the screen and animate the width so that this feels more fluid at least
• Still keep the text under it, but with alpha 0f to keep the exact size that you’re looking for.
• Cache the old size as you were doing, which I don’t love tbh
• Actually put an absolutely fixed size on the button. We typically do this in our design system buttons, where it’s fillMaxWidth always anyway so it’s no problem

[Pedro Alberto]

I removed cache now

[Pedro Alberto]

Screen Recording 2022-10-28 at 13.36.05.mov

[Pedro Alberto]

I added a layer on top of the button

[Pedro Alberto]

so in reality the text is there

[Pedro Alberto]

so the structured looks like.

BOX {
BUTTON {
ICON
TEXT
}
BOX {
CircularProgress
}
}

[Stylianos Gakis]

Good job! As long as you know what the text should be and it’s not gonna increase in size, I think that’s what I would’ve done too.

[Pedro Alberto]

even it changes

the box with progress has the following

Box(
    modifier = Modifier
        .matchParentSize()

[Pedro Alberto]

so it should rezise

[Pedro Alberto]

or should I also test that 🙂

[Pedro Alberto]

🧐

[Pedro Alberto]

yes it works 🙂

[Pedro Alberto]

thanks guys 🙂 some how explain the problem made me see the solution

[Stylianos Gakis]

The classic rubber duck debugging. Super high success rate in my experience 😄

[Chris Sinco [G]]

That solution is what I would’ve done. That is to use a Box and positioning the elements over each over versus trying to put the spinner in the Button

[Chris Sinco [G]]

Or just toggle alpha of the text in the button between 0 and 1, to keep the button content width set

[Pedro Alberto]

@Chris Sinco [G] @Stylianos Gakis which one is more performant ? Layer or just colouring alpha?

[Pedro Alberto]

my guess is Color is better for performance but I want to know your opinion

[Stylianos Gakis]

I'd just toggle alpha for clarity code reasons. I really doubt performance would be an issue here, and I wouldn't prematurely optimize for it unless you benchmark and notice an actual issue.