It is best practice to indicate to the user of your app that your app is doing work that the user should wait for. A common way of doing this is using animated gifs that indicates that the app did not freeze but is doing background work.

In this blog post I will show you how to use the custom SpinningText control to create a dynamics spinner that allow you to display what ever text you want while the app is doing background work.

It is a prerequisit that you have installed the SpinningText control. You can download a solution file that includes this control here: https://github.com/jenschristianschroder/PCF-Text-Animation/releases

Creating a dynamic spinner

To get started, first, create a new canvas app in the form factor you like.

Next, import the SpinningText control into your app (read how to do this here: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/component-framework-for-canvas-apps)

Now that the custom control is imported into your app we can start implementing the dynamic loading spinner functionality.

Add a button and a textinput control to your app. Name them appropriately, I named mine textLoadingText and buttonLongOperation.

Insert a label and resize it to fill your entire screen. Name the label something like labelLoaderBackground. Set the background color of the label to a semi transparent color.

Add the custom SpinningText control to your screen and set its properties in the Advanced pane. Set the Text to the value of your TextInput control. In my app the Text value is set to textLoadingText.Text. Also set the remaining properties of the SpinningText control.

        

 

On the OnVisible property of your screen, add the following formula, Set(loading, false). This initialized a variable called loading with the value false. We will use this to handle visibility of the loading spinner.

 
 
On the labelLoaderBackground and SpinningText control, set the Visible property to loading. This way we can control the visibility of the loading spinner by changing the value of the loading variable. Setting the loading variable to true will display the spinner and setting it to false will hide the spinner.

To simulate a long running operation add a Timer control to your screen and rename it to something like timerSimulateOperation. Set its duration to something like 10000 (10 seconds) and set its Start property to loading  and its OnTimerEnd property to Set(loading, false). This will simulate a background operation that last 10 seconds. Note, you can set the visibility of the timer to off to hide it. It will still work

 
 

Now to start this whole thing off, set the OnSelect property of the buttonLongOperation to Set(loading, true). Now when clicking the button it will display the spinner and start the timer. When the timer runs out it will hide the spinner again.


 
Playing the app should allow you to simulate a 10 second long operation and display the spinning text by clicking the button.

You can download an example app here: LoadingSpinnerDemoCanvasApp.zip