How To Add Loader In PowerApps Screen?

Overview

 
I am going to share a tip to design a loading Icon or display a loading message until your PowerApps App Loads the Controls and Data on the screen.

Of Course, it will improve your app's user experience as well.

In PowerApps, we have two techniques to provide this feature:
 

Technique 1 - Out Of The Box Loader


Out Of The Box PowerApps App, provide a property called LoadingSpinner and LoadingSpinnerColor.
 
How To Add Loader In PowerApps Screen
 
LoadingSpinner property is used to displaying a PowerApps App OOTB Loader Image unless your screen finishes loading.
 
How To Add Loader In PowerApps Screen
 
LoadingSpinner can be used in three ways

By default, the LoadingSpinner value is set to None, but you can change it either Data or Controls as per your need
  • LoadingSpinner.None
    Setting its value to None means it won't show the Loading Image on the screen.

  • LoadingSpinner.Controls
    Setting its value to Controls means, it will show the Loading Spinner unless all the controls present on the screen gets loaded completely.

  • LoadingSpinner.Data
    Setting its value to Data means, it will show the Loading Spinner until all the data gets retrieved on the screen from the defined data source.

  • LoadingSpinnerColor property is used to change the colour of the loading image (as per your need).
How To Add Loader In PowerApps Screen

How To Add Loader In PowerApps Screen

This is how OOTB Loading Spinner Looks like.
 

Technique 2 - Design Custom Loader

 
Step 1
 
Download the Gif Loader from the Internet (whatever you like)

In this blog, we use,

https://i.stack.imgur.com/hzk6C.gif

Step 2
 
Add some Controls in your Canvas Screen where you want to display the loader And create a group of those controls.
  • Rectangle Icon - To cover the whole screen and provide a placeholder for a loader.
  • Image - To display Gif Loader Image.
How To Add Loader In PowerApps Screen
 
Note
You can also design the loader screen as per your need by adding more controls.

Step 3
 
Declare a variable to manage the visibility of the Loader and control group(Loader) created in Step 2. 
 
Set the variable "LoaderVisibility" to visible property of Control Group (Loader)

How To Add Loader In PowerApps Screen

Note
After setting a Variable (LoaderVisibility) name, you'll get an error on the controls. Please ignore it for the time being. It is because we didn't set its value yet anywhere on the screen.

Step 4
 
Set the Variable value to True when you want to display the Loader, else set the value to False when you want to Hide the Loader (can hide/show as per your need).

In the below example, I have set the variable(LoaderVisibility) value To true at the Submit button Control (OnSelect Property).
 
How To Add Loader In PowerApps Screen

And set the variable(LoaderVisibility) value To false at SharepointForm1 Control (OnSuccess and OnFailure Property). 
 
How To Add Loader In PowerApps Screen
 
Step 5
 
Run and Test.
 
How To Add Loader In PowerApps Screen
So thumb rule of displaying this loader is,
 
Set the Variable Value to True at the beginning of your code
  1. Set(DisplayLoader, true);  
  2. /////Logic 1  
  3. /////Logic 2  
  4. /////Run Power Automate 1  
  5. /////Run Power Automate 2  
  6. /////Run Power Automate 3  
  7. /////Run Power Automate.....n  
  8. /////Logic ...n  
  9. //Perform all the logic/create/update/delete/retrieve  
  10. Set(DisplayLoader, false);  
Set the Variable value to False at the end of your code
 
Important Note
 
In the above example, I have used the loader while pushing the data/record in the database. However, If you want to display the loader on the load of the screen, you can use the same algorithm (as shown above) on the Visible property of your App Screen.