UX Patterns: Pre-loader

From a UX point of view, pre-loaders are important and set the right expectation by letting users know that something is happening such as the data is being fetched from the server or some other more computationally intensive operation is taking place.  In what follow, we will show how we can implement a pre-loader in PowerApps.

Initial Setup

Let’s assume this is our main UI.  We will build our pre-loader on top of it.

We start by setting the OnVisible as follow :

UpdateContext({showLoader:true});SampleApi.SampleMyApiCall({duration:5200});UpdateContext({showLoader:false})

Here we are simply declaring a variable called showLoader and we are setting it to true initially. We can now make an API Call followed immediately by another UpdateContext where we set the showLoader variable to false. This last statement will only happen until my API call is done.

Creating the Pre-loader overlay

We will create our pre-loader using rectangle, a GIF animation and textbox.  We then group these elements and set the Visible property to showLoader

Because Visible is set to showLoader, when we first load the screen, the preloader overlay will be visible but it will hide as soon as the API call is done since we set showLoader to false.

As you can see, it’s pretty straightforward to create a pre-loader experience and its impact on the user experience can be significant. You create your own GIFs or use some popular sites such as http://preloaders.net/