disable Button when loading
ashjtan opened this issue · comments
Feature request
Make Button unclickable when loading prop is true.
Why?
Currently, when the loading prop is set, the button is still clickable. Event handlers that are fired from a button click can continue to be fired while the button is loading. I can't really think of instances where we would intend for the button to be clicked while it is shown as 'loading'.
Alternatives
No change; any instance where it is important to disable the button while loading can be handled individually by the users, i.e.
<m-button
:loading="isLoading"
:disabled="isDisabled || isLoading"
>
Additional context
No response
This also applies to the m-text-button (not sure if the logic comes from the same spot), noticed the same issue.
Like you said, this can readily be handled by users by setting the disabled state if the loading state is active to make the button unclickable, e.g.:
<m-button
:loading="isLoading"
:disabled="isDisabled || isLoading"
>Another alternative is to still allow clicks but to not perform any action if the loading state is active, e.g.:
<m-button
@click="onClick"
:loading="isLoading"
:disabled="isDisabled"
>
onClick() {
if (this.isLoading) return;
// do click action stuff here
}I can't really think of instances where we would intend for the button to be clicked while it is shown as 'loading'.
Hmmm, what if clicking on a loading button cancels the loading action? Or what if clicking on a loading button opens a toast which shows the current loading progress using a progress bar?
These are uncommon scenarios for sure, but I'm not sure if I want to entirely rule them out by enforcing a disabled state when the loading state is active at the library level. As demonstrated above this is already trivially enforceable at the user level.
I guess my question is: is this really that common of a gotcha that trips up Maker users that it would be valuable for us to hardcode this behavior into the Button component itself?
I feel like the flip side ends up being worse in terms of sending API requests when there's still one in progress. Easy for a FE dev to forget to test the scenario of spamming a button and could result in some unintended behaviour.
Could expose functionality to allow disabling that functionality in case of any edge cases where we would want to allow clicking in the loading state? Just seems to me we should be targeting the 90/10 use cases.
@pretzelhammer thanks for pointing out some examples! given there are scenarios where you may want the loading button to be clickable, i agree that it's not functionality we want to entirely rule out.
however, to answer your question, this gotcha does seem to be common enough; i've gotten bug reports on three different buttons so far with this issue, and the buttons in question are relatively high-traffic. i'm guessing the same problem exists with lower-traffic buttons too, but there are just no reports. honestly, i feel like i would go through and end up adding
<m-button
:loading="isLoading"
:disabled="isDisabled || isLoading"
>
to every MButton i've added that uses the loading state.
i'm congruent with @kevinlee11 -- by default, we disable the button on loading, but maybe add a prop like clickableOnLoading. or -- and i'm more in-line with this -- go ahead and disable the button on loading, and see if anyone comes up with a scenario where they would need the clickableOnLoading prop, and it can get added in then.
the biggest reason i don't see a need for a clickable loading button is from a design aspect; all we show on the loading state is the loading swirl animation. there is no way to set the loading prop but have a text label or some other indication that clicking the button while it was loading would do something, like in the examples you gave. so while right now the button is clickable on loading, i don't understand from a design aspect why we would ever intend for the button to be clicked while it was loading without some visual indicator.
i figure if there is a case in the future where someone wants clickableOnLoading, they will also want the loading state to allow more than just the swirl on the button, in which case the "loading state" will become extremely murky.
okay sure, sounds like you both are saying this is a gotcha that trips up devs, I'm cool with changing MButton to be disabled whenever the loading state is true
Either of you are welcome to make a PR but if you're both busy I can probably find time to do it within the next few days.
pr merged