Inspired by #17810
Closes #7223

<LoadingButton variant="outlined" pending pendingIndicatorPosition="center">
  Fetch data
</LoadingButton>
<LoadingButton
  variant="outlined"
  pending
  pendingIndicator="Loading..."
  pendingIndicatorPosition="center"
>
  Submit
</LoadingButton>
<LoadingButton
  variant="contained"
  color="primary"
  pending
  pendingIndicatorPosition="end"
  endIcon={<SendIcon />}
>
  Send
</LoadingButton>
<LoadingButton
  variant="contained"
  color="secondary"
  pending
  startIcon={<SaveIcon />}
>
  Save
</LoadingButton>

Some considerations:

• I've added pendingIndicatorPosition for allowing customers to specify where the pendingIndicator will be shown: 'start' | 'center' | 'end'. It is replacing respectively the startIcon, children or the endIcon part.
• the default pendingIndicator is CircularProgress
• I am setting the Button to disabled if it is in pending state, although this means that the contained buttons will end up with the grey disabled background.. Not sure if this is expected, but I am open for other ideas
• The pendingIndicator is absolutely positioned inside the Button, depending on the pendingIndicatorPosition prop, in order to avoid width changes of the Button

Benchmark

The implementation was benchmarked with the following sources. I have noticed that the loading and disabled states are often styled independently.

Evergreen

Blueprint

Vuetify

Cosmos

Antd

Element

Sancho

SemanticUI

Quasar

Base UI

Atlaskit