Frontpedia
Cover image of What are Artificial Delays?

What are Artificial Delays?

Cool tutorial from BuildUI.com on how to implement an "Artificial Delay" in user interfaces. The concept is based on the idea that an operation that completes too quickly can be confusing for the user, as it may not inspire confidence that the operation completed successfully. To avoid this, the tutorial suggests wrapping your mutation with a minimum delay function. This function uses Promise.all to run the operation and delay in parallel, ensuring that if the underlying mutation takes longer than the minimum delay, the user is not forced to wait any longer than necessary.

There's an example of how to implement this in a form submission scenario, where the form is disabled while the operation is in progress and re-enabled after a minimum delay. It also includes a code snippet demonstrating how to create a sleep function and a minimum delay function. This pattern should only be used for non-optimistic UI, as optimistic UI generally avoids pending states altogether.

You might also like

The End
Visit site