Stepper - Showing Spinner between steps - Material Design for Bootstrap

Topic: Stepper - Showing Spinner between steps

cawgit asked 6 years ago

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>

Add comment

Magdalena Dembna staff premium answered 6 years ago

0 0 Best answer

Hi, I understand that you're fetching your data asynchronously and control spinner display with loading variable. If you are using promises, you could set the variable to true right before fetch and then add another .then to the end of a chain and in its body set loading variable back to false - this way user will see spinner until data arrives. This solution will display spinner for as long as data is loading.If this solution is not what you're looking for, you can check out demo folder in our pro package - specifically page for a preloading script - we're listening for an event 'load'. In you case I think it should be placed in beforeUpdate. Let me know if any of this solutions solves your problem. Kind regards, Magdalena

Add comment

cawgit answered 6 years ago

0 0 Best answer

Ok, let me try that. Thanks I will respond and let you know if it works.

Add comment