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/

✅ “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!