> ## Documentation Index
> Fetch the complete documentation index at: https://docs.oppla.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```javascript theme={null}
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

```javascript theme={null}
{
  type: 'wait',
  duration: 2000,
  message: 'Loading...',
  showSpinner: true
}
```

## Advanced Features

### Wait for Element

Wait for an element to appear:

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

### Wait for Condition

Wait for a custom condition:

```javascript theme={null}
{
  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:

```javascript theme={null}
{
  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

<CardGroup cols={2}>
  <Card title="Tooltips" icon="comment" href="/tours/tooltip">
    Learn about tooltip steps
  </Card>

  <Card title="Modals" icon="window-maximize" href="/tours/modal">
    Learn about modal steps
  </Card>
</CardGroup>