# Delay Interaction

## **How it works**

1. **Drag and drop:** Place the Delay Interaction Component onto the screen where you want the pause to occur.
2. **Set the delay time:** In the component's properties, enter the pause duration in milliseconds (1000 milliseconds = 1 second).
3. **(Optional) Add interactions:** The interactions panel allows you to define specific actions that will occur after the delay. For example, you could show a confirmation message, trigger an animation, or navigate to a different part of your app.

## **Example use cases**

* **Splash screen:** Show your app's logo for a few seconds while it loads.
* **Onboarding flow:** Give users a moment to read instructions before asking them to interact.
* **Progress indicator:** Display a loading bar while a task is being completed.
* **Interactive tutorials:** Pause between steps to allow users to follow along.
* **Form validation:** Briefly display an error message before clearing a form field

## Tutorials

<table><thead><tr><th width="308">Name</th><th>Description</th></tr></thead><tbody><tr><td><a href="../tutorials/components/delay-interaction/creating-a-confetti-celebration-on-the-final-screen"><strong>Creating a confetti celebration on the final screen</strong></a></td><td>Learn to celebrate user milestones with confetti in Salesforce Flow!</td></tr><tr><td><a href="../tutorials/components/delay-interaction/launch-a-flow-dialog-without-a-screen"><strong>Launch a flow dialog without a screen</strong></a></td><td>Learn to subtly initiate flow dialogs using the invisible Delay Interaction component for smoother, cleaner user experiences.</td></tr></tbody></table>

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="211">Type</th><th>Description</th></tr></thead><tbody><tr><td>Delay (Milliseconds)</td><td>String</td><td>The delay in milliseconds before proceeding to the next screen.</td></tr><tr><td>Show Loading</td><td>Boolean</td><td>Define if a loading spinner should be displayed.</td></tr></tbody></table>

### Events

No events are available

### Styling hooks

No Styling hooks are available
