As you know, backend requests can take long to execute and while executing you might want to block user from executing actions in your application.

As we saw in previous post:
you should disable buttons/links while actions that change data are being executed to avoid duplicated requests and misbehaviors that can lead to data corruption or duplication, but you can also add another layer of feedback to the user such as display a screen overlay while those actions are being executed.

I’ve implemented the idea and shared it as a Forge Component so you can grab it here: https://www.outsystems.com/forge/component-overview/21336/xhr-loading-overlay-o11

The component automatically intercept XMLHttpRequests and displays a loading overlay while waiting for response.

Let’s consider this as an extension to previous post and apply it.

As you can see:

1. I clicked the button, and the loading overlay was automatically visible;
2. While the loading overlay is visible in the screen, i cannot click anything that is displayed under the overlay;
3. After the XHR request ends, the overlay is automatically hidden;

You can test the working example here: https://tiagomlcdias.outsystemscloud.com/BlogArticles/XHRLoadingOverlay

“Show a spinner, buy some time, blame the network.”