Power Apps Shimmer Control: Gorgeous Looking Loading Screens

Power Apps Shimmer Control: Gorgeous Looking Loading Screens

The Power Apps shimmer control included in the Creator Kit will take your loading screen designs to the next level. Shimmers are placeholder shapes that appear where the data will eventually display. They are preferred over loading spinners because they give an indication of where the data will display. In this article I will show you how to make a skeleton screen with shimmers appear while data is loading.

Table of Contents
• Introduction: The Car Inventory AppSetup The SharePoint ListLoad SharePoint List Data Into A CollectionDisplay Car Inventory Data In A GalleryInstall The Power Apps Creator KitImport The Power Apps Shimmer Control Code ComponentCreate A Single Line ShimmerMake A Multiple Line Shimmer ControlInsert A Circle Shaped Shimmer ControlShow The Skeleton Screen During Data LoadTest The Power Apps Shimmer Control




Introduction: The Car Inventory App

A sales team uses the Car Inventory app to check which cars are available to sell to customers. When the list of cars is loading a skeleton screen appears with shimmers for placeholders.



Then once loading is completed, the screen looks like this.




Setup The SharePoint List

Create a new SharePoint list named Car Sales Inventory. Include the following columns:

  • year – number
  • make – single line text
  • mode – single line text
  • cost – number


Fill-in the SharePoint list with at least 100 rows of data that looks similar to this. A larger list will have a longer loading time and display the skeleton screen & shimmer effect for longer.


IDyearmakemodelcost
12000HondaAccord15,242.74
21998OldsmobileAurora14,691.91
31984MasteratiQuattroporte7,568.83
42011ChevroletMalibu22,711.39
52006Mercedes-BenzG-Class13,949.48
1001999CadillacSeville25,137.47




Load SharePoint List Data Into A Collection

Open Power Apps Studio and create a new mobile app from blank. Insert a label with the text “Car Inventory” and place it at the top of the screen. Then set the background of the screen to a light gray color.



Add the Car Sales Inventory SharePoint list to the app.



When the sales person presses the reload icon data from the SharePoint list will be loaded to the app. Add a reload icon to the screen.



Write this code in the OnSelect property of the reload icon.

Refresh('Car Sales Inventory');
ClearCollect(
    colCarSalesInventory,
    'Car Sales Inventory'
);

Each vehicle in the Car Sales Inventory SharePoint list will be displayed on a card inside a gallery. Add a new vertical gallery to the screen.



Use this code in the Items property of the gallery to populate it with data.

colCarSalesInventory



Update the following gallery properties to make it have cards.

TemplateFill: Color.White
TemplatePadding: 20
TemplateSize: 160



Insert two labels into the gallery to the display a car’s year, make and model. Stack the labels vertically.



Use this code in the Text property of the top label of show the car’s make and model.

$"{ThisItem.make} {ThisItem.model}"



Then use this code in the Text property of the bottom label to show the car’s year.

ThisItem.year



Add another label to the gallery to show the car’s cost.



Write this code in the Text property of the label.

Text(ThisItem.cost,"$#,###")



Then add a button to the gallery to display the first initial of car’s make.



Using the values below, style the button to be a solid colored circle that cannot selected

Color: Color.White
DisplayMode: DisplayMode.View
Fill: RGBA(9, 33, 98, 1)
Height: 88
Radius: 180
Width: 88



Write this code in the Text property of the label.

Left(ThisItem.make,1)




Install The Power Apps Creator Kit

Up until this point we have been creating a basic app to build a skeleton screen and shimmer animation for. Now it’s time to actually build the skeleton & shimmer. To do this, we will need to install the Power Apps Creator Kit. It includes a shimmer control we will need in the next part of the tutorial.

Download the Power Apps Creator Kit and install it in the same environment as the Car Inventory App.




Import The Power Apps Shimmer Control Code Component

Once the Creator Kit installed we need to import the Power Apps Shimmer Control code component into our app. Open the Insert menu and select the Get More Components button.



Select the Code tab and search for the Shimmer control. Choose the Fluent Shimmer control from the search results and click Import.



The Shimmer control will now appear under Code Components in the Insert menu.




Create A Single Line Shimmer Control

While the Car Sales Inventory data is loading we want to show a skeleton screen and use the shimmer control as a placeholder for the data. Copy the Car Inventory gallery and place it above the original gallery in the Tree View.



Insert a shimmer control inside the gallery and position directly on top of the car price label.



Use this code in the Item property of the shimmer control to configure it as a line (as opposed to a circle). By setting the ItemWidth and ItemHeight properties as shown below we can make the shimmer fill the entire area.

Table(
    {
        ItemKey: "1",
        ItemWidth: Text(Self.Width),
        ItemHeight: Text(Self.Height),
        ItemRowKey: "1",
        ItemType: "line"
    }
)



Also change the SpaceBetweenShimmer property to this value to eliminate the empty space at the top of the control.

"0px"




Make A Multiple Line Shimmer Control

Similar to the car price, we want to make a shimmer to cover the car’s make model and year. Insert a new shimmer control and stretch it cover cover the make model and information labels.



Use this code in the Items property of the shimmer control to define it as a line type.

Table(
    {
        ItemKey: "1",
        ItemWidth: Text(Self.Width),
        ItemHeight: 24,
        ItemRowKey: "1",
        ItemType: "line"
    }
)



Set the SpaceBetweenShimmer property to the value shown below.

"20px"



Then use the RowCount property to show the same shimmer pattern on multiple lines.

2




Insert A Circle Shaped Shimmer Control

The final shimmer will be circle shaped to cover the button showing the car make’s first letter. Add a new shimmer control to the gallery and cover the button.



Use this code in the Items property of the shimmer. The ItemType field changes it into a circle.

Table(
    {
        ItemKey: "1",
        ItemWidth: Text(Self.Width),
        ItemHeight: Text(Self.Height),
        ItemRowKey: "1",
        ItemType: "circle"
    }
)



Set the SpaceBetweenShimmer property value to 0.

"0px"




Show The Skeleton Screen During Data Load

We want to display the skeleton screen and shimmer controls while the screen’s data is being loaded.



Update the reload icon’s OnSelect property code to this code.

// Show Shimmer
UpdateContext({locHideShimmer: false});

// Do Actions
Refresh('Car Sales Inventory');
ClearCollect(
    colCarSalesInventory,
    'Car Sales Inventory'
);

// Hide Shimmer
UpdateContext({locHideShimmer: true});



We show the shimmer before starting to load data and and we hide the shimmer it once data loading is completed.



Use this code in the Visible property of the Shimmer gallery.

!locHideShimmer



The shimmer must also appear during the screen’s initial load.



Use this code in the OnVisible property of the screen.

ClearCollect(
    colCarSalesInventory,
    'Car Sales Inventory'
);
UpdateContext({locHideShimmer: true});




Test The Power Apps Shimmer Control

The skeleton screen and shimmer control are now completed. Press the reload button to test the app.





Questions?

If you have any questions or feedback about Power Apps Shimmer Control: Gorgeous Looking Loading Screens please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest

10 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Ramesh Mukka
Ramesh Mukka
10 months ago

Hi Matt,
Please tell about the license part of Creator kit. Should I have a premium license to utilise this or any part of it?

Ryan Sockalosky
Ryan Sockalosky
10 months ago

thank you for this great article and example!

I had been previously attempting to use the Shimmer control more like the Progress Indicator – in creating a single instance and placing that over the entire gallery control. In that form I was unable to identify how to create a more customized layout of circles, lines, etc.

This makes much more sense now that you have placed individual shimmer controls over the UX elements placing the Shimmer control directly inside the gallery.

It would be great for the MSFT team would add similar guidance / example in the documentation for the toolkit. This tutorial makes this control considerably more intuitive!

Rahul Nadar
Rahul Nadar
10 months ago

How to add shimmers if we are filtering out gallery

alexsolex
alexsolex
10 months ago

Great job !
Anyway using the whole creator kit may be overkill if you ‘just’ need the shimmer effect. And citizens devs may not be allowed to enable PCF components.
That’s why I tried to achieve the same shimmer effect but using animated SVG images.
I would be glad to get your thoughts about it !

"data:image/svg+xml;utf8, "&EncodeUrl(
"<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 "&Self.Width&" "&Self.Height&"' >


  <defs>


    <linearGradient id='shimmer' x1='-250%' y1='0%' x2='200%' y2='0.1%'>
      <stop stop-color='#EFEFEF' offset='-10%'>
        <animate repeatCount='indefinite' attributeName='offset' values='-0.5;0.95' dur='1.5s' begin='0s' />
      </stop>
      <stop stop-color='#DFDFDF' offset='-5%'>
        <animate repeatCount='indefinite' attributeName='offset' values='-0;1' dur='1.5s' begin='0s' />
      </stop>
      <stop stop-color='#EFEFEF' offset='0%'>
        <animate repeatCount='indefinite' attributeName='offset' values='0.05;1.05' dur='1.5s' begin='0s' />
      </stop>
    </linearGradient>


  </defs>
  <rect width='100%' height='100%' fill='url(#shimmer)' />
  
</svg>") 
Capture d
Kyle
Kyle
10 months ago
Reply to  alexsolex

This is awesome – thank you! We cannot use PCF components in our environment at this time.

Last edited 10 months ago by Kyle
Tim
Tim
10 months ago
Reply to  alexsolex

Wow awesome, thanks for sharing 😉