PowerApps Data-Loading Animation Best Practices

Out-of-the-box PowerApps include the following animations to communicate a loading state as the app retrieves data from the data source:

• Horizontally Scrolling Dots: The dots move across the top of the screen as data is being loaded. This is a subtitle graphic that may not be noticed by the user.
• LoadingSpinner property: When configured, a spinning circle is displayed on the screen.
• Getting Your Data: The words “getting your data” are displayed in the center of the screen that communicates PowerApps is getting your data…

Each of the above features are presented to the user during the initial load of a form. To add a loading animation that will be displayed when a button is clicked, follow the steps below:

1. Upload the loading gif from your PowerApps solution

• In PowerApps, click File
• Click Media
• Images
• Click Browse
• Select the gif

2. Add the image to a screen in your app

1. Click Insert
2. Click Media
3. Click Image
4. Update the Image Control Property
   1. Click Image
   2. Type the name of the uploaded image

3. Configure the image to appear behind the control that renders the data, by right-clicking the image and choosing Send to back.

4. Add a control to render the data to the screen. For this guide, I will use a gallery.

5. Configure the gallery to overlay the image by right-clicking the image and choosing Bring to front

Next, configure the visibility of both the image and the gallery:

6. Set its gif’s visibility to a

7. Set the gallery visibility variable to False when the collection is empty and True when the collection is not empty.

8. Configure the data source of the Gallery.

The final step is to configure the control that will load the data. In this example, we used a button:

9. Configure the button OnClick property to:

1. Set the gif visibility variable to True
2. Load the collection that is the data source for the gallery

Result

When the button is clicked, the loading gif will become visible. After the data is loaded into the Gallery, the gallery will become visible and overlay the loading gif. That’s it! If you still have questions about creating PowerApps data-loading animations, please don’t hesitate to reach out to us. We’d love to help you get started.