​

Wait Steps

Learn how to create and customize wait steps to pause your tour until certain conditions are met.

​

Basic Usage

​

Create a Wait Step

import { createTour } from '@oppla-ai/tours';

const tour = createTour({
  id: 'feature-tour',
  steps: [
    {
      type: 'wait',
      duration: 2000 // Wait for 2 seconds
    }
  ]
});

tour.start();

​

Wait with Options

{
  type: 'wait',
  duration: 2000,
  message: 'Loading...',
  showSpinner: true
}

​

Advanced Features

​

Wait for Element

Wait for an element to appear:

{
  type: 'wait',
  target: '#feature-button',
  timeout: 5000,
  message: 'Waiting for feature to load...'
}

​

Wait for Condition

Wait for a custom condition:

{
  type: 'wait',
  condition: () => {
    return document.querySelector('#feature-button') !== null;
  },
  timeout: 5000,
  message: 'Waiting for feature to be ready...'
}

​

Wait for User Action

Wait for user interaction:

{
  type: 'wait',
  userAction: 'click',
  target: '#feature-button',
  message: 'Please click the button to continue'
}

​

Best Practices

1. Be Clear: Provide clear messages about what you’re waiting for
2. Be Patient: Set reasonable timeouts
3. Be Helpful: Show loading indicators when appropriate
4. Be Fallback: Provide fallback behavior if conditions aren’t met

​

Common Issues

​

Wait Not Completing

• Check condition logic
• Verify target element exists
• Check timeout values
• Ensure proper event handling

​

User Experience

• Avoid long wait times
• Provide clear feedback
• Handle timeouts gracefully
• Consider fallback options

​

Next Steps