Introduce `loading` prop for buttons

Is your feature request related to a problem? Please describe…

If a user clicks a button that triggers a long async action, there is no easy way to provide feedback.

Describe the solution you’d like

I would like to set a loading state on a button, that can be enabled/disabled by setting a ‘loading’ prop. Enabling the loading prop will automatically show a loading indicator on the button (prepend before the label?) and disable the button from further user action.

Describe alternatives you’ve considered

We can use the spinner in combination with a button and some additional setting to get the same result, but this feels verbose.

Additional context

Perhaps other actionable elements can also receive the loading prop.

[tmorehouse]

One could simple v-if a <b-spinner> in a <b-button>, and then the user would have complete control of where the loading spinner is placed, what loading spinner (or feedback) they want, etc.

<b-button :disabled="busy">
  <b-spinner :class="busy ? 'invisible' : null"></b-spinner>
  <span v-if="busy">Loading...</span>
  <span v-if="!busy">Not loading</span>
</b-button>

An alternative, when v2.7.0 is released you could wrap the <b-button> with the new <b-overlay> component for an even fancier loading button.

<b-overlay :show="busy" rounded class="d-inline-block">
  <b-button :disabled="busy">Do something</b-button>
</b-overlay>

See https://bootstrap-vue.netlify.com/docs/components/overlay for a preview of 2.7.0

[tmorehouse]

BootstrapVue 2.7.0 has been released, with the new <b-overlay> component.