Loading Screen

When a user triggers an action that takes some time to complete, such as generating a file or processing data, it is good practice to show a loading screen. This lets users know that the system is working and prevents interaction with the interface until the process finishes. In this article, we explain how to build a simple loading screen using standard flowchart logic, without relying on advanced features.

Field and Flow

The most basic version of a loading screen uses just one field: Loading Details. This field holds a message or the progress of a certain process to be shown on the loading screen. The setup uses a flowchart called Loading Screen, which includes an overlay interaction node and an assignment node to clear the Loading Details field.

The Interaction Node

The loading screen works because of the Follow Exit widget. This widget automatically triggers a selected exit after a defined delay. If no delay is set, it triggers immediately. Even-though the exit is triggered immediately the loading screen remains visible until the next interaction node is reached, without slowing down the process running in the background.

<div class="text-center" style="margin: 50px;">
<i class="fa fa-spinner fa-spin text-info" style="font-size:54px"></i>
</div>

Using the loading screen

The loading screen in the example is used inside a loop that processes a large number of rows. Every 1000 rows, the Loading Details field is updated, and the loading overlay is shown again. This means that the screen updates every time an interaction node is reached. It either shows the updated loading screen or continues to the next screen after the loop ends.

Important: An overlay cannot be the first node after a navigation action. Overlays require a full-screen page as a base. To solve this, use an interaction node with a Follow Exit widget before the overlay is triggered. In the example below, a full-size interaction called Widgets is used to set the background. This page becomes the base for the loading screen overlay to be on top of.