[Button] Add loading support

[thupi]

Description

I have a hard time indicating that the website is making a server request and the user might wait and at the same time prevent the user from clicking login again. Some of our users repeatedly click login if the server responds slowly.

It cloud be an excellent feature if the button could expect at "loading" prop. When the button is passed loading={true} it should disable interaction and indicate it is loading.

I am currently using material-ui@next in a project which is planned to be put into production soon :-) Great progress :-)!

Images & references

Screenshots is taken from https://vuetifyjs.com/components/buttons (Loaders section).

[imerkle]

you can create a function that disables button and another enables. and wrap your ajax request function like

1 call the disable button
2 do ajax ->
2 callback of ajax -> enable button

and in the disable/enable functions you can further do whatever customisation you need using like adding loaders etc.

[thupi]

@dsslimshaddy Nice solution.

At the moment i have made a wrapper component that injects a span into the button which add the loader. Futher more it prevents the onClick method from being called :-) ! That might work for my need at the moment. Thanks for the suggestion :-)

[vritant24]

Hi, if no one else has taken it, I'd like to try and implement this feature.

[thupi]

@vritant24 Hi, that sounds awesome :-) !

[vritant24]

On which buttons would this feature be applied on?

[oliviertassinari]

There is only one button on the v1-alpha branch.

[thupi]

@vritant24 Did you take this task :-) ? Otherwise i might look a bit into how this could be solved :-)

[vritant24]

@thupi yes you can go ahead and look into it. I've had to move on to other work

[esseswann]

I think if the feature is implemented we could check if the onClick function is async and then transition to loading state by default.

[imerkle]

here's something i wrapped https://www.webpackbin.com/bins/-Kr01wKU_hD4ILcj8IPJ

[slavab89]

You could do something yourself which seems to work pretty well
Create a component that wraps a button and does something like

<Button>
  {!this.props.loading ?
    <CircularProgress size={14} /> : // Size 14 works pretty well
    <Typography>Click Me</Typography>}
</Button>

If you like to style your own button or dont really want to have the inner span for whatever reason, you could always use ButtonBase

[CamdenKo]

Hey there, should I add @slavab89 's implementation to the documentation?

[oliviertassinari]

@CamdenKo Sure, it would be great :)

[jankalfus]

Be careful that using LinearProgress inside of Button produces invalid HTML as LinearProgress is implemented using a div. And divs can't be placed inside of buttons, it's not valid HTML.

[oliviertassinari]

@jankalfus component="span" should solve this problem :).

[oliviertassinari]

We have tried to solve this problem in the core in #17810 but it didn't go into the core. I think that it would be great to resume the effort.

[jankalfus]

@oliviertassinari Hmm, doesn't seem like the component prop is available in either CircularProgress or LinearProgress: https://github.com/mui-org/material-ui/blob/6ced014170c18eefa5549f2a165881a73d94f943/packages/material-ui/src/CircularProgress/CircularProgress.js

[oliviertassinari]

@jankalfus It sounds like we have found a compelling use case for adding such component prop, in case you want to lead this effort, I think that we should accept a pull request for it :).

[mbrookes]

Does CircularProgress need to be a child of the button? The current docs examples overlay the progress indicator over the button.

https://material-ui.com/components/progress/#interactive-integration

#17810 used the progress indicator as a startIcon, but looking at the spec the current approach in the docs seems closer: https://material.io/components/progress-indicators/#circular-progress-indicators

"[Circular progress indicators] can be applied directly to a surface, such as a button or card."

See also: "Integrating with actions" for more details and a video.

(The other thing I noticed is that what we renamed to static has replaced the more complex animation that is currently used for circular determinate.)

[oliviertassinari]

Does CircularProgress need to be a child of the button?

I think that it has the potential to give the best implementation. Without this approach, an extra div needs to be placed around the button, which might break the current display mode, e.g. inline vs block.

@mbrookes Thanks for the link to the specification, I believe it's what Vuetify implements, it looks great. Keeping the same shape of the button seems an important property (layout stability).

[alvamanu]

The tricky part is not the if / else isloading. If you have an array of rows and those rows have the custom component button, say, <ButtonWithLoader/>, it's very tricky to tell which button has been clicked. I currently have the issue that when initiating an axios call, I update the oncall prop to true, but since the <ButtonWithLoader/> I've created has been duplicated, the loader shows in each button.