Blog

Handling slow backend actions in Vaadin apps

By  
Matti Tahvonen
Matti Tahvonen
·
On Oct 1, 2024 6:19:21 PM
·

Vaadin’s business-app-oriented web frameworks come with a helpful productivity feature that automatically indicates to users when a backend call takes unusually long. While this feature is incredibly useful for developers to understand and manage performance, and is sufficient for most backend calls, it may not be ideal for end users during longer actions. The UI can become locked in these cases, potentially making it seem unresponsive or broken to new users.

Enhancing the user experience for long actions

Here are a couple of ways to improve the user experience:

  • Show a notification or message on the screen before starting the action.
  • Display a dedicated indeterminate progress bar near the action's origin or where the result is expected to appear.
  • Go asynchronous and:
    • Provide progress updates during the action, for example, by updating a progress bar or adding messages to a log visible in the UI.
    • Detach or dock the processing in the background, allowing the user to continue working on other tasks within your app.

See the demo in action

While asynchronous processing often yields the best user experience, it can be more challenging to implement correctly. The optimal solution depends on your specific requirements.

To help with this decision, I’ve prepared a demo Vaadin Flow application that showcases various approaches and tools for handling slow backend calls.

Proceed to the Slow Actions Demo App -->

Matti Tahvonen
Matti Tahvonen
Matti Tahvonen has a long history in Vaadin R&D: developing the core framework from the dark ages of pure JS client side to the GWT era and creating number of official and unofficial Vaadin add-ons. His current responsibility is to keep you up to date with latest and greatest Vaadin related technologies. You can follow him on Twitter – @MattiTahvonen
Other posts by Matti Tahvonen