Skip to main content

I’m having cases when I have a button where, after pressing, it should show loading.



  • Button label is resizable, and the button is hugging it.

  • However, the loading indicator is a fixed small size, which means that in the prototype, my button becomes smaller during the loading stage.


My idea here is to resolve it with an option to sum up variables for the size.



  • Create a variable or something that will calculate the current size of the label in the button and add button hugging sizing. See the picture below:


Suggestion

Hey @alexanh20,


Thanks for posting and sharing this idea!


I can see what you mean and a variable using auto layout values could indeed solve this situation. I have shared your idea with our Product team so they can take a look at it. At this point, I can’t guarantee nor share an ETA for it but it will taken into consideration.


In the meantime, I would suggest you remove the auto layout from your button to prevent it from resizing with the loading dots. For example, if this button is a component with auto layout, you can decide to remove it on specific instances where the button is not meant to resize in your prototype (or more directly, remove it from your main component to only use it temporarily on each instance to resize the button when needed before removing it again).


Hoping this is helpful! 🙂

If you need a slightly hacky fix in the meantime, I suggest on your loading state keeping the label present but setting it’s layer opacity to 0% (so the size of the button stays the same) and then placing the loading indicator over it with absolute positioning, constraints set to center/center

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings