Need delay between each step to provide time for the element to load in DOM

[FrancisBrokering]

I'm encountering an issue where the next step in my Reactour opens before the modal for the current step has finished opening. To open the modal, I'm using the action property within the StepType. Is there a workaround to prevent the next step from opening until the modal is fully open? https://user-images.githubusercontent.com/43657864/236607769-22fbfe99-05ce-4c23-ace9-5a768e96f368.mov

[FrancisBrokering]

any help?

[ConstantinChirila]

@FrancisBrokering You can try doing something like this:

  const [step, setStep] = useState(0);
  const setCurrentStep = (step) => {
    setTimeout(() => {
      setStep(step);
    }, 1000); <-- YOUR DELAY
  };

<TourProvider steps={steps} setCurrentStep={setCurrentStep} currentStep={step}>
       <Router />
</TourProvider>

Basically you highjack the setting of the current step and delay the change.

[usamamajid6]

Try using this prop: 'inViewThreshold'.