Wait Steps

Learn how to create and customize wait steps in Oppla tours

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

Tooltips

Learn about tooltip steps

Modals

Learn about modal steps