When building canvas apps, it must be ensured the responsiveness and user experience will be the ones that should be. One effective tool for enhancing user interactions is the implementation of a loading overlay.
There are a few key points for a no/low code developer to use a loading overlay on an app:
- Prevent multiple submissions: It prevents issues such as duplicate submissions that can arise when users repeatedly click the same button due to a lack of confidence that their first click has been registered.
- Enhancing user experience: An overlay that includes animations or progress indicators can enhance the user experience by making wait times seem shorter and helping to keep users informed of the progress of their requests.
- Visual Consistency: The app maintains a professional appearance throughout. The use of a standard loading overlay will ensure that the app’s look and feel remain uniform whenever it is processing data.
In the next steps you will read how to implement a loading overlay in your canvas app.
To start with you will create a new canvas app with two sreens, name them MainSreen and SecondaryScreen.
Download your loading spinner and upload it into your Power App.
You can download the loading spinner from https://loading.io/
Import the “Bean Eater-1s-200px.svg” under the Media section
After uploading the loading spinner image you will need two more controls a Label and a Timer
In the App On Start, create a new variable: Set(varloadingspinner,false)
In the MainScreen add the image and the timer
Set the Image1, {Visible} function to : If(varloadingspinner = true, true, false)
Set on Timer1 the Auto start property On and change Duration to 5000.
Set on Timer1 the {OnTimerStart} function to : Set(gblLoading, true); Set(varloadingspinner, true)
Set on Timer1 the {OnTimerEnd} function to : Navigate(‘SecondaryScreen’); Set(varloadingspinner, false)
In the SecondaryScreen add the Label1 and type a text, i.e., “Thanks for reading!”
The video below shows how exactly the above code will work for your canvas app.