PowerApps - Display a loading icon until the screen loads completely

Hello Everyone,

First, I would like to personally thank everyone for providing such a great response to PowerGuide Program and keep your spirits up during this tough Covid time!

I wish you well during this challenging time. Stay at home. Be healthy and God bless you!

Keep Learning and Don't Let Your Learning Lockdown...

I am Starting today's Power Guide Mentorship Program with a Positive Thought:

TOUGH TIMES DON'T LAST

TOUGH PEOPLE DO

Today, I am going to share a #PowerGuideTip7 - Isn’t it a great idea to show a cool animated image until your canvas app screen is loading? Interesting Isn’t...!!!

So in today's program, I am going to share a tip to design a loading Icon or displaying a loading message until your Canvas 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 Box Loader

Out Of Box Canvas App, provide a property called LoadingSpinner and LoadingSpinnerColor.

LoadingSpinner property is used to displaying a Canvas App OOB Loader Image unless your screen finishes loading.

LoadingSpinner can be used in three ways:

• LoadingSpinner.None- Setting it's a value to None means it won't show the Loading Image on the screen.

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

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

LoadingSpinnerColor property is used to change the color of the loading image (as per your need).

Please see below, how can you find these two properties in Canvas App Screen:

Click on the Screen in your Canvas App and then You'll be able to see LoadingSpinner and LoadingSpinnerColor Property

By default, LoadingSpinner value is set to None, but you can change it either Data or Controls as per your need

Different ways to display the LoadingSpinner

Can change LoadingSpinner Color using LoadingSpinnerColor property

This is how OOB Loading Spinner Looks like

Technique 2 - Design Custom Loader

I always promote using OOB features as much as possible whether it is Microsoft Dynamics 365 or Power Platform, however, while using this feature, my experience was not satisfactory to be very honest. Maybe Microsft will come up with some new enhancements to make it more mature.

And it's not me only who is complaining about this feature, you can find a lot of people (see reference below) having trouble using it especially in case of data loading.

https://powerusers.microsoft.com/t5/Building-Power-Apps/Custom-Loading-Spinner/td-p/268416

https://powerusers.microsoft.com/t5/Building-Power-Apps/Screen-new-property-LoadingSpinner/m-p/110767

Also, you can't change the Spinner Loader Image and its other properties (except its color).

Hence, to get rid of this situation, making your own loader is the best way, so that you can handle its appearance and Hide/Show as per your need.

Let's get started...

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

Can refer following articles for the same:

https://loading.io/

https://icons8.com/preloaders/

Step 2: Add some Controls in your Canvas Screen where you want to display the loader

a) Rectangle Icon - To cover the whole screen and provide a placeholder for a loader.
b) Label - Display Progress Message (For Ex: "Please wait, Thanks for your patience...")
c) Image - To display Gif Loader Image.

Note: You can also design the loader screen as per your need by adding more controls.


Step 3: Declare a Variable to manage Hide/Show of Loader and all the Controls created in Step 2. 

Set the Variable to all the Controls (on Visible Property)

In the screenshot below, I have set the Variable for Label Control only. However, you have to do the same for the Rectangle and Loading Image as well.

Note: After setting a Variable (DisplayLoader) 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 am creating a Lead in Dynamics 365. and I have used the following formula on Create Button Control (OnSelect Property).

I have Set the Variable value to True (to display loader) at the beginning of my code and Set the Variable value to False (to hide the loader) at the end of the code

// Display Loader
Set(DisplayLoader, true);

//patch the daa into D365
Patch(Leads, Defaults(Leads), { firstname: firstName_6.Text },{ lastname: lastName_5.Text },{emailaddress1: emailAddress_5.Text},{jobtitle: jobTitle_4.Text},{mobilephone: mobilephone_5.Text});

// Save Data Locally by adding above collection in Local Cache
Navigate(SuccessScreen,ScreenTransition.Fade);

//Once done with the operation. Hide the Loader
Set(DisplayLoader, false);

Step 6: Run and Test the App

So thumb rule of displaying this loader is:

Set the Variable Value to True at the beginning of your code

Set(DisplayLoader, true);

/////Logic 1

/////Logic 2

/////Run Power Automate 1

/////Run Power Automate 2

/////Run Power Automate 3

/////Run Power Automate.....n

/////Logic ...n

//Perform all the logic/create/update/delete/retrieve

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 OnVisible property of your Canvas App Screen.




That's all folks for today.

Stay Tuned for my Next Tip - PowerGuideTip8.