[MdButton] Spinners and buttons don't play well together

[BigBadaboom]

In order to indicate a processing/busy state, I embed an <md-spinner> in a button while a backend API is being called.

<md-button v-if="isSubmitting">
    <md-progress-spinner md-mode="indeterminate"></md-progress-spinner>
</md-button>

<md-button v-else ... @click.native="submit">Submit</md-button>

However something weird happens when you click this button. Try clicking the button in the following fiddle: https://jsfiddle.net/x8gds6t6/13/

For about a second after the button switches back from the spinner to "Submit" the label is positioned in the wrong place on the button. In fact, if you click lots of times quickly, it can get even worse. The button gets wider than it is supposed to be..

In my real-world app, the effect is even worse than what happens in this fiddle. The button can get very wide indeed.

Looking at the DOM, the DIV.md-button-content seems to accumulate multiple copies of the spinner markup. They then slowly disappear one by one until the button returns to normal form. See below:

The problem doesn't seem to happen if you use plain text instead of a spinner. See: https://jsfiddle.net/x8gds6t6/14/

[Samuell1]

We doesnt support spinners inside button. It's against material design guidelines.

I recommed you to make overlay that will have your spinner on top of your form. (You can check example of loading overlay here: https://codesandbox.io/s/github/vuematerial/examples/tree/master/examples/login)

[BigBadaboom]

Where in the guidelines does it say that this is not allowed? I couldn't find anything that says that.

[BigBadaboom]

I found a solution. The following CSS solves the problem for me.

BUTTON.md-button .md-progress-spinner.md-indeterminate.md-progress-spinner-enter,
BUTTON.md-button .md-progress-spinner.md-indeterminate.md-progress-spinner-leave-active
{
  display: none;
}

[Samuell1]

@BigBadaboom Its not in guidelines because is againts material design. But there is one circular loading button but i think that will not match your style of form: https://material.io/guidelines/components/progress-activity.html

[BigBadaboom]

I'm not sure I agree with that view. The guidelines don't explicitly disallow it. In fact it says:

[Buttons] may display text, imagery, or both.

https://material.io/guidelines/components/buttons.html#

I think a spinner counts as imagery.

Incidentally, the material-ui.com (React) team seem to support these: https://github.com/mui-org/material-ui/issues/7223

[VdustR]

You can use this temporary

https://codepen.io/VdustR/pen/WzzRJG

[BigBadaboom]

@VdustR Thanks for doing that. I appreciate it.

Getting rid of the spinner fade in and out, as I posted above, worked well enough for me.

[mbrookes]

We doesnt support spinners inside button. It's against material design guidelines.

That may have changed since:

"Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card."

https://material.io/components/progress-indicators/#circular-progress-indicators