Build Professional Loading Screens with the Creator Kit Shimmer

Stop forcing your users to stare at a blank canvas while data streams into your app. A spinning loader tells them something is happening, but it offers no context about the content they are waiting for. Skeleton screens enhanced with the shimmer effect solve this by rendering lightweight grey placeholders that mirror your app's final widget layout. When the data arrives, the placeholders gracefully fade into the real content, creating a polished, modern experience.

The Power Apps Creator Kit includes a Fluent Shimmer code component that makes implementing this pattern straightforward. In this guide, you will build a Supplier Order Tracker that uses a shimmer skeleton screen to keep users informed and engaged during the data-loading phase.

Scenario Overview: Supplier Order Tracker

Imagine a procurement dashboard where a manager reviews incoming supplier orders. The main screen lists every order in a vertical gallery. While the underlying SharePoint list loads, a skeleton gallery—complete with animated circle and line shimmers—covers the area. Once the collection is populated, the skeleton fades out and the live data appears.

The SharePoint Data Source

Create a SharePoint list named SupplierOrders. Define the following columns:

Populate the list with at least 50–100 rows. A larger data set gives you a longer loading window during development to observe the shimmer effect in action.

Connecting the App

Open Power Apps Studio and create a new blank canvas app. Connect it to the SupplierOrders SharePoint list. Switch to the App object and add the following to its OnStart property:

ClearCollect(
  colSupplierOrders,
  SupplierOrders
);

This gives you a collection named colSupplierOrders to work with.

Building the Main Gallery Screen

The primary screen contains a header, a refresh icon, and a vertical gallery that displays the supplier orders.

1. Set the screen background to a light gray color, for example RGBA(237, 235, 233, 1).
2. Add a Refresh icon to the top-right corner of the header. We will wire it up later.
3. Insert a Vertical Gallery and bind its Items property to colSupplierOrders.

Configure the gallery template with these settings:

• TemplateSize: 180
• TemplatePadding: 12
• TemplateFill: Color.White

Inside the template, add the following elements:

• Circle control (status icon): Width: 56, Height: 56, Radius: 28. Set Fill to If(ThisItem.IsOnTime, Color.Green, Color.Red).
• Label 1 (supplier name): Text = ThisItem.SupplierName, FontWeight = SemiBold, FontSize = 16.
• Label 2 (item category): Text = ThisItem.ItemCategory, FontSize = 12, Color = DarkGray.
• Label 3 (total cost): Text = Text(ThisItem.TotalCost, "$#,##0.00"), FontSize = 14, TextAlignment = Align.Right.

Installing the Fluent Shimmer Component

The shimmer effect requires the Power Apps Creator Kit. If you haven't already, install it in your environment.

Once the Creator Kit is installed, import the Fluent Shimmer code component into your app:

1. Open the Insert menu.
2. Select Get more components.
3. Switch to the Code tab.
4. Search for Fluent Shimmer.
5. Check the box and click Import.

The Fluent Shimmer now appears under the Code components section in the Insert pane. You can drag it onto any screen or gallery template.

Creating the Skeleton Gallery

The secret to a flawless skeleton screen is a duplicate gallery positioned directly on top of the real gallery. This skeleton gallery contains the shimmer controls instead of live data labels.

Step 1: Duplicate the Gallery

Select your real gallery and press Ctrl+C, then Ctrl+V. A copy appears. Move the copy aside for editing, then snap it back into the exact same position as the original.

Clear the Items property of the copied gallery and replace it with a fixed list to generate rows:

[1,2,3,4,5,6,7,8,9,10]

This creates ten skeleton rows. Keeping this number reasonable is critical for performance.

Step 2: Remove Live Controls and Add Shimmers

Delete the labels, the circle icon, and any other live data controls from the skeleton gallery template. The template should be empty.

Now add Fluent Shimmer controls to the template, aligning each one precisely with where a real element lives.

Circle Shimmer (Status Icon)

Drag a Fluent Shimmer into the template. Resize and position it to exactly cover the circle icon (56 x 56, same X and Y).

Configure its Items property:

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

Set SpaceBetweenShimmer to "0px".

Line Shimmer (Supplier Name)

Add a second Fluent Shimmer. Align it over the SupplierName label.

Configure its Items property:

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

Set SpaceBetweenShimmer to "8px" to give it a bit of breathing room.

Line Shimmer (Item Category)

Add a third Fluent Shimmer. Align it over the ItemCategory label.

Use code similar to the single line shimmer but change ItemHeight to 14 to match the smaller font size.

Line Shimmer (Total Cost)

Add a fourth Fluent Shimmer. Align it over the TotalCost label.

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

Set SpaceBetweenShimmer to "0px".

Wiring the Loading State

We need a state variable that lets the app switch between the skeleton gallery and the real gallery.

Go to the Screen and set its OnVisible property:

UpdateContext({varShowSkeleton: true});
ClearCollect(colSupplierOrders, SupplierOrders);
UpdateContext({varShowSkeleton: false});

For the Refresh icon OnSelect property, use the same pattern so users can trigger a manual reload:

UpdateContext({varShowSkeleton: true});
Refresh(SupplierOrders);
ClearCollect(colSupplierOrders, SupplierOrders);
UpdateContext({varShowSkeleton: false});

Now bind the Visible properties:

• Real Gallery Visible: !varShowSkeleton
• Skeleton Gallery Visible: varShowSkeleton

Make sure the Skeleton Gallery is above the Real Gallery in the Tree View so it receives the visible space when active.

Customization and Best Practices

The Fluent Shimmer control exposes several properties that let you fine-tune its appearance:

• ShimmerColor / BackgroundColor: Integrate with your app's theme. For a dark background, use a dark shimmer with a slightly lighter highlight.
• WaveDirection: Choose between "left-right", "top-bottom", or "alternate".
• Speed: Lower the Speed property (measured in milliseconds) for a faster shimmer animation.

Troubleshooting Common Issues

Shimmer doesn't appear.

• Check that the Items property of the skeleton gallery is not blank.
• Verify the z-order: the skeleton gallery must be above the real gallery.
• Ensure varShowSkeleton is true during the initial load.

Shimmer size doesn't match the real element.

• Set SpaceBetweenShimmer to "0px" to eliminate gaps.
• Use Text(Self.Width) and Text(Self.Height) in the Items property so the shimmer fills its bounding box perfectly.

The skeleton screen flashes and disappears too quickly.

• In a fast environment, ClearCollect resolves almost instantly. You can artificially extend the skeleton window by adding a small delay for demonstration purposes, but in production this is a good problem to have—your app is fast!

The shimmer animation looks choppy.

• Lower the Speed property or reduce the number of shimmer controls on the screen. Excessive code components can degrade runtime performance.

Conclusion

The shimmer effect from the Creator Kit is a straightforward way to level up your Power Apps user experience. It transforms the awkward blank loading phase into a polished, animated preview of what is about to appear. By combining a skeleton gallery, precisely aligned Fluent Shimmer controls, and a simple context variable, you leave the "spinner-only" approach behind.

Start implementing this pattern on your main list and detail screens. Your users will appreciate the modern, responsive feel.

References

• Matthew Devaney, Power Apps Shimmer Control: Gorgeous Looking Loading Screens, https://www.matthewdevaney.com/power-apps-shimmer-control-gorgeous-looking-loading-screens/
• Microsoft Learn, Creator Kit Overview, https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/overview
• Microsoft Learn, Fluent Shimmer component, https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/shimmer