In the modern enterprise landscape, Perceived Performance is as critical as actual execution speed. As we scale Power Platform solutions to thousands of users, the traditional “loading spinner” often fails to provide the seamless experience users expect from world-class SaaS products.
To address this, I developed PowerShimmer Ultra-Light—a PCF (Power Apps Control Framework) component designed to bridge the gap between heavy data-loading states and high-fidelity user interfaces.
The Problem: The “Loading” Friction
Standard loading indicators in Power Apps (spinners or progress bars) often create a “stop-and-go” psychological effect. Users perceive the app as “broken” or “stuck” when a screen is completely blank during a ClearCollect or Filter operation.
Architecture-wise, many existing Shimmer components are either:
- Too Heavy: Bundling massive CSS libraries that increase the solution size.
- Inflexible: Hard-coded to specific layouts.
- High Latency: Requiring complex calculations on the Canvas side before rendering.
Architecture & Technical Specification
The core philosophy of PowerShimmer Ultra-Light is maximum performance with a minimum footprint.
1. Hardware-Accelerated Rendering
Unlike controls that rely on heavy React-based UI libraries, PowerShimmer utilizes a Hardware-Accelerated CSS Linear Gradient engine. By leveraging CSS variables, we offload the animation rendering to the GPU, ensuring the Shimmer remains smooth (60fps) even when the main JS thread is busy fetching Dataverse records.
2. Control Properties & Customization
To align with Enterprise Design Systems, the control is fully configurable through the following parameters:
| Property | Type | Default | Description |
|---|---|---|---|
| Base Color | Color | #F3F2F1 | The background color of the shimmer skeleton. |
| Highlight Color | Color | #E1DFDD | The color of the moving “glint” effect. |
| Animation Speed | Decimal | 1.5 | Controls the velocity of the shimmer (in seconds). |
| Border Radius | Whole Number | 4 | Adjusts the roundness of the shimmer edges. |
3. Implementation Logic: The “Layered” Strategy
From an architectural standpoint, the most efficient implementation is a Layered UI Strategy.
The Setup:
- Place the PowerShimmer control exactly where your data (Gallery/Form) will appear.
- Set the
Visibleproperty of the PowerShimmer to your loading variable (e.g.,locIsLoading). - Set the
Visibleproperty of your Data Gallery to!locIsLoading.
This ensures that the user sees the “Skeleton” layout the millisecond the screen opens, providing instant visual feedback while the OnVisible formulas execute.
Why “Ultra-Light”?
The name isn’t just marketing; it’s a technical distinction. By stripping away dependencies on Fluent UI React bundles and using vanilla TypeScript logic for the rendering container, the bundle size is significantly optimized.
- ~40% Reduction in Bundle Size: Compared to standard community Shimmer controls.
- Faster App Boot Times: Critical for mobile devices with limited bandwidth.
- Lower Memory Footprint: Vital for Power Apps running within Teams or mobile wrappers where resources are shared.
Conclusion
Building for the Power Platform in 2026 requires more than just functional logic; it requires an “App-First” mindset. PowerShimmer Ultra-Light is a testament to the idea that pro-dev extensibility (PCF) should be used to enhance the user experience without compromising on performance.
Resources & Links
- Source Code: GitHub - SunilP-PowerApps-Shimmer
- Community: Find this control on PCF Gallery (Submission in progress)
- Documentation: Full Installation Guide
Let’s Connect
How is your organization handling the shift to Managed Environments in 2026? I would love to hear your thoughts in the Power Platform Community or on LinkedIn.
Sunil Kumar Pashikanti
Principal Software Architect & Microsoft Community Super User. With 18+ years in the Microsoft ecosystem, I specialize in bridging the gap between enterprise business needs and advanced technical execution across Power Platform and Azure.