Expected behavior

Would like to be able to show a button with a spinner (showing that there is action taking place) when a user clicks on a next step button.

Actual behavior

No such thing exists, which is fine, but I would like to know the recommended way to accomplish this. See below for the code I am using. But I am having trouble determining which event I should use to set the loading variable back to a zero. I am basically setting a var to 1 to change the mdb-btn to the version with the spinner, but when setting back to a zero on mounted, updated, beforeUpdate, it doesn't seem to set the var back to a zero showing the button without the spinner. I am using a stepper component and I want to show the spinner when next step on one step and API call is done to validate some information (that occasionally takes a few seconds due to its an AWS lambda function) and I want to make sure the user is seeing that some action is happening.

Resources (screenshots, code snippets etc.)

<mdb-btn size="sm" v-show="currentStep < 4 && loading == 1" class="md-primary md-raised float-right" color="primary" rounded @click="nextStep" :disabled="!next" ref="nextStep">NEXT STEP

<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="sr-only">Loading...</span> </mdb-btn>