What is the preferred way to "wait" for network call response before showing next step?

[jfpicard123]

I have this situation where I want to show the user what happens before and after a Save

if(e.name == 'stepShow' && e.value.anchorId == 'tourStepSave')
{
  setTimeout(() => { this.saveClick(); }, 1000);
}  

Assuming the this.saveClick() triggers a back-end call that takes 5s but stays on the same page ... how can I "tell" the Tour to wait for response before displaying next step (which shows a save result message for example)?

Thanks!

N.B. I found a workaround which is to split the tour steps array into 2 arrays. After the save is complete. I reinitialize and start the tour with the second array. Maybe there's a better way ..

[hakimio]

• You can set isAsync option for the tour step and add the next anchor element to DOM only after the data is loaded
• You can use custom tour step template and when user clicks Next instead of immediately triggering next step on the tour, you can wait for your data to load and only then call tourService.next().

[jfpicard123]

Thanks .. so simple!