[LoadingButton] Should be able to show loading indicator if onClick returns a promise

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

If the onClick handler returns a promise the LoadingButton could set its own internal state to show a loading indicator despite the loading prop value. Also, this behavior could be enabled/disabled by default and overwritten with a prop like enableOnClickPromiseCheck or something like that

Examples 🌈

I don't expect this work as it is, just drafted something quickly based on the component source code, this example does not consider the ability to enable/disable this behavior since it may break existing users' implementations.

const LoadingButton = props => {
  const [_loading, setLoading] = useState(false);
  const { onClick, loading = false, disabled = false, ...other } = props;

  const ownerState = {
    ...props,
    loadingIndicator,
    loadingPosition,
    variant,
    loading: _loading || loading,
    disabled: disabled || _loading || loading,
  };

  const loadingButtonLoadingIndicator = ownerState.loading ? (
    <LoadingButtonLoadingIndicator className={classes.loadingIndicator} ownerState={ownerState}>
      {loadingIndicator}
    </LoadingButtonLoadingIndicator>
  ) : null;

  const handleClick = async (...args)=> {
    setLoading(true);
    await onClick?.(...args);
    setLoading(false);
  };

  return <LoadingButtonRoot onClick={handleClick} disabled={ownerState.disabled} {...other} />;
};

Motivation 🔦

In my projects, I used to create my own AsyncButton every time, with my own progress indicator and all that stuff. When LoadingButton was added to the lab package I thought I could get rid of that but it only made it simple, I don't need to maintain the loading indicator styling and all that stuff but I still need to wrap my handler to achieve the promise like behavior

CodeSandbox 🧊

https://codesandbox.io/s/mui-async-loading-button-demo-g1fm6e

Start with the LoadingButton component source and reproduce the reported behavior using the linked CodeSandbox. Trace how onClick, loading, disabled, and the loading indicator currently interact, then determine the expected behavior for promise-returning handlers and how it should be enabled or disabled. Done means the behavior and its compatibility with existing loading prop usage are covered by the component's tests.