We will learn the tips & tricks for building a loading screen in Canvas App. Before we start, make sure to subscribe to CRM Crate so that you can stay up to date in the field of Power Platform.

Why do we need a loading screen or a loading animation in Canvas App?

• Loading pages are screens that users see when the application they are using is being loaded. These loading animations are important because they help users focus on the loading progress, not on the loading time. It’s also a confirmation that things are moving forward, and the app isn’t broken.
• Canvas Apps are self-sufficient in terms of performance & user experience and typically do not require any loading screens or wating time. But there can be scenarios where the Canvas App may require to deal with large datasets which might impact the loading performance of a Canvas App. For such scenarios, we can use the out-of-the-box loading spinners or the custom splash screens.
• In this article, we will learn to add a loading splash screen in a Canvas App.

Building a Splash screen

• We will build a splash screen with help of Timer control which will display the loading message and loading animations before the actual application screen appears for an end user.
• The below diagram describes the functioning of our splash screen.

• As shown in the above diagram, we will leverage the Timer control to dynamically set the loading message data and auto-navigating the user from splash screen to an actual screen.

Steps for creating a custom splash screen –

Follow the below steps for creating your own loading screen / animation.

• Create a new screen, navigate to the “OnVisible” property and initialize a new variable to store an initial loading message as shown below.

UpdateContext({CRMCrateLoadingInfo :"Loading Resources ........"})	

• Add a label on the screen which will display the data (Loading message) from the above initialized variable “CRMCrateLoadingInfo “.

• You can even add your own GIF images for providing an animated look to your splash screen such as shown below.

• Now add a new Timer control and configure it with the properties as shown below.

• The above Timer control will work as a trigger point for switching the loading messages and navigating to an actual screen when the user spends 3 seconds of screen time on the splash screen. Note: – Apart from the Timer control, you can also user your own trigger point for switching the loading screen such as collection creation, completion of certain calculation etc.

• The below animation demonstrates the working of our loading screen implementation in Canvas App.

Thus, we learned to build a loading screen in Canvas App.

• LinkedIn
• Facebook
• Telegram