[LoadingButton] Loading component should be inline when positioned left or right

[chriswilty]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently, the loading spinner/component is position:absolute for all positions. If I have a button stretching the full length of its container, as opposed to exactly fitting its content, this means with position "start" or "end" the spinner appears at the very beginning or end of the button, with the text label in the middle, which doesn't look good.

It would be far neater (and consistent) if for these two positions, the spinner was simply inlined in the same way as the button's startIcon / endIcon.

Note that the button icon is currently faded out when transitioning to loading state, so this may need a rethink, unless the loading spinner is faded in to match.

Examples 🌈

How it looks when not loading:

How it looks when loading:

How I want it to look:

https://m3.material.io/components/buttons/guidelines#9ecffdb3-ef29-47e7-8d5d-f78b404fcafe
https://m3.material.io/components/buttons/guidelines#89ba49e3-31b5-47ae-9665-3e7f33452d0f

Motivation 🔦

We could remove a fair bit of boilerplate code by using LoadingButton instead of Button. But currently, we cannot use LoadingButton because of this issue, and centrally positioning the loading component is not an option for us because the button text then disappears.

[mj12albert]

@chriswilty Thanks for reporting this ~ I kind of expected setting loadingPosition="center" to achieve what you wanted but instead it just replaces its children with the loader 😓

The current behavior is also not in line with the Material Design 2 spec:

[OmPr366]

I'm working on it

[olibo733]

I'm working on it

Hi are you still working on it? I'm interested in taking over if it is possible :)

[OmPr366]

go ahead

[olibo733]

Isn't this issue already fixed? Can't seem to get the loading icon and text to seperate

[ivanhouttaylor]

Isn't this issue already fixed? Can't seem to get the loading icon and text to seperate

My team also ran into this issue, and it seems that the loading spinner appears inline when fullWidth={true} for the LoadingButton component, as your screenshot shows. Without fullWidth, the spinner is still appearing in the wrong location (far left or right).

[MetaMmodern]

@ivanhouttaylor thanks, good observation, at least now we now a workaround for this. I saw #28652 where it was fixed, but apparently hardcoded for just fullWidth=true
I also wanted to add that sometimes with fullWidth it behaves even worse, like this:

Also fixable with fullWidth.

happening on v5.15.19.