Improve UX in Power Apps with the PowerShimmer Ultra-Light PCF — Open-Source Component

🎉 Introducing the Shimmer PCF for Power Apps

When apps load data, blank screens or spinners can make users feel like the app is slow, even if it’s only a second or two. Modern apps (Microsoft, LinkedIn, YouTube, etc.) use a Shimmer effect: lightweight, animated placeholders that signal progress and improve perceived performance.

I built an open-source Shimmer PCF for Power Apps so makers can add this UX pattern easily in Canvas and Model‑driven apps.

• GitHub (code + README): SunilP-PowerApps-Shimmer
• PCF Gallery: [Link to PCF Gallery]
• Author: Sunil Pashikanti 

🚀 What This Component Does

• Shows skeleton placeholders with a subtle shimmer animation while data is loading.
• Reduces perceived wait time → users feel the app is faster.
• Works for lists, cards, forms, grids, configurable shapes.
• Lightweight, theme-aware (update the property panel fields like background/highlight color).
• Easy to toggle: show shimmer when IsLoading = true, hide when data arrives.

🧩 When to Use It

• Before a gallery or data table loads records (Dataverse/SQL/SharePoint).
• While OnVisible / OnStart logic runs (Lookups, PowerFx, network calls).
• When future‑proofing UX for slow or mobile networks.
• For consistent, professional loading states across app screens.

🛠️ How to Install

Option A — Import as a Solution (Recommended for Makers)

1. Download the .zip solution from Releases on GitHub.
2. In Power Apps → Solutions → Import → upload the file.
3. Publish all customizations.
4. The control appears under Code components.

Option B — Build from Source (For Developers)

1.Clone the repo:

     git clone https://github.com/spashikanti/SunilP-PowerApps-Shimmer.git
     cd SunilP-PowerApps-Shimmer
     npm install

2.Build & pack

     npm run build
     pac pcf push
     # or pack into solution and import

3.Import the solution into your environment.

Note: You’ll need the Power Platform CLI (pac) for local dev builds.

🎛️ Using the Shimmer in Your App

Canvas App

1. Open your app → Insert → Custom / Code components → add Shimmer.
2. Place it over the area your data will appear (e.g., over a gallery).
3. Bind properties:
   • Visible → IsLoading (your boolean or !IsBlank(Gallery1.AllItems) logic)
   • Background Color → #EBEBEB
   • Highlight Color →  #F5F5F5
   • Animation Speed (s) → 1.5
   • Corner radius (px) → 10 (for rounded rectangle only)
   • Shape Type → "Rectangle" | "Circle" | "Rounded rectangle" (depending on your component options)
   • Width/Height → match the final content area

Typical Pattern

     // Screen OnVisible

     Set(IsLoading, true);

     Concurrent(

         Refresh('YourDataSource'),

         // other initialization

     );

     Set(IsLoading, false);

     // Shimmer.Visible

     IsLoading

     // Gallery.Visible

     !IsLoading

Model‑Driven App

• Add the PCF as a field or dataset control depending on your implementation.
• Toggle visibility via form business rules or by binding to a dataset state.

📈 Performance Notes

• The shimmer layer is lightweight and should not block data load.
• Keep the Rows value reasonable for mobile screens (e.g., 4–8, only if applicable).
• Hide the component as soon as data is ready (IsLoading = false).
• Avoid stacking multiple animated controls on the same screen. 
• Built using standard Fluent UI React components for native performance

🧭 Roadmap / Ideas

• Additional layout presets (grid, table, multi-column)
• Data-aware skeletons (name, avatar, lines)
• Reduced-motion mode for accessibility
• Per-control theming options

Have a suggestion? Open a GitHub issue or submit a PR!

 🛟 Troubleshooting

• I don’t see the component in Insert → Code components
  • Ensure the solution is imported and published in the same environment.
• Animation not visible
  • Confirm Visible = true and Opacity/colors aren’t overridden by overlays.
• Performance dips on mobile
  • Reduce Rows, limit overlapping animated elements.

📄 License & Credits

• License: See LICENSE in the GitHub repository.
• Gallery: Published soon on pcf.gallery (thanks to Guido Preti and the community reviewers).
• Author: Sunil Kumar Pashikanti

🔗 Links

• GitHub (README, install, issues): SunilP-PowerApps-Shimmer
• PCF Gallery (once live): [Link to PCF Gallery]
• This blog: https://sunilpashikanti.blogspot.com/

Note on Security Prompts: When you first add PowerShimmer to your app, you may see a prompt titled "App contains custom code." This is a standard Power Platform security guardrail for all PCF components. Since this is an open-source component, you can review the source code on my GitHub to verify its safety. This message only appears for Makers in Studio and will not be visible to your end users.

✅ “TL;DR” Summary Box

Add shimmer loading placeholders in Power Apps with my open-source PCF.

• Better UX & perceived performance
• Easy toggle with IsLoading
• Works with Canvas & Model-driven
• Free, open source — try it & star the repo!