Delay Interaction

Overview

The Delay Interaction Component is a powerful tool for controlling the timing and flow of your user interfaces. It lets you pause a screen for a specific amount of time before automatically moving on to the next screen. This is helpful for:

  • Creating visual transitions: Add a brief pause to allow a loading animation to complete or a message to be read before the next screen appears.

  • Simulating real-world processes: Mimic actions like a file upload, data processing, or a network request that takes time to finish.

  • Improving user experience: Give users a moment to absorb information or prepare for an action before the interface changes.

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 duration of the pause in milliseconds (1000 milliseconds = 1 second).

  3. (Optional) Add interactions: If you want specific actions to happen after the delay, you can define these using the interactions panel. 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

Specifications

Attributes

Events

No events are available

Styling hooks

No Styling hooks are available

Last updated