Ditch GIFs: 3 Power Apps Spinners That Prevent User Abandonment

In 2026, the best loading spinners in Power Apps use native Timers and SVGs, not GIFs, to avoid bloat and ensure smooth performance across devices. For years, adding a loading GIF was the standard approach when our apps felt unresponsive during heavy data operations. However, legacy GIF files cause severe memory bloat and degrade performance. Today, we must adopt modern, lightweight techniques. The top three methods available in Power Apps Studio right now are native Timer controls rotating a standard icon, Scalable Vector Graphics (SVGs) rendered inside HTML text controls, and generative AI via Copilot to build custom CSS animations. This guide breaks down exactly how to implement these modern solutions to keep users engaged and applications running efficiently.

TL;DR / Quick Answer

• Use Timer + Icon for native spinners: The fastest method with zero media uploads involves pairing a default Power Apps icon with a Timer control to calculate a continuous rotation angle.
• SVG over GIF for speed: SVGs are math-based vector graphics, making them up to 90% smaller than GIFs while maintaining perfect resolution on mobile devices.
• Copilot for custom icons: In 2026, we can prompt Copilot directly within Power Apps to generate custom SVG or CSS loading spinners in seconds.
• Lottie animations are the future: The 2026 wave 1 release brings native support for lightweight Lottie files, offering state-based interactivity.
• Optimise before animating: Always use the Concurrent() function and move variables to App.Formulas to reduce actual load times before attempting to mask them with a spinner.

Who Is This Guide For? And What Do You Need First?

We designed this guide for Power Apps canvas app developers possessing one to three years of experience. At this stage, you understand how to connect to SharePoint or Dataverse, build galleries, and write standard Power Fx formulas. However, complex applications often suffer from a common user experience issue: when patching records or pulling large datasets, the app appears to freeze. Default Power Apps behaviour provides minimal feedback during these operations, which frustrates users and leads to multiple erroneous button clicks.

Before implementing the solutions detailed below, we must ensure a few prerequisites are met within your environment.

Key Takeaway: Preparation is vital. Ensure a testing environment is ready with a mock data delay, and verify that boolean context variables are fully understood before attempting to build custom loading states.

First, a standard Power Apps license is required to access the Power Apps Studio.1 Second, you should have a sample canvas app ready for testing. This app should ideally contain a data connection that takes a few seconds to load, such as a gallery filtering a large SharePoint list or a form submitting data to Microsoft Dataverse. If you do not have a slow data connection, you can simulate one for testing purposes.

Third, a basic understanding of context variables and Timer control properties is essential. The methods discussed will rely heavily on boolean variables—such as locShowSpinner—to toggle the visibility of the loading animations. Furthermore, familiarity with the Timer.OnTimerEnd and Timer.Value properties is necessary, as these dictate how the application calculates the rotation and duration of the visual feedback.2

Finally, ensure your environment is updated to the latest 2026 release wave.5 Some features, such as enhanced Copilot prompts and modern Fluent 2 controls, depend on the newest architecture. The 2026 wave 1 release makes the modern look the default and brings streamlined headers, which visually affect how loading elements sit on the screen.6

Why Do Power Apps Still Need Loading Spinners in 2026?

Despite immense improvements in server-side processing and client-side rendering, loading spinners remain a critical component of application design in 2026. The necessity of these visual cues is rooted deeply in human psychology and user experience principles.

Key Takeaway: Implementing a loading spinner is a psychological necessity. Applications must acknowledge input within 0.1 seconds, even if the actual data processing takes several seconds to complete.

According to application loading feedback statistics from the Nielsen Norman Group, the human brain requires constant feedback to feel in control of a digital environment.8 The research indicates a strict threshold for digital patience: 0.1 seconds gives the feeling of instantaneous response, meaning the outcome feels entirely caused by the user rather than the computer.10 Once an action takes longer than a full second, the user loses their seamless flow of thought.

The most critical metric, however, is the three-second rule. Statistics show that users abandon applications and websites after just three seconds of no visual feedback.8 When a Power App executes a heavy ClearCollect operation without a loading spinner, the screen freezes. Users instantly assume the application has crashed. This expectation violation triggers a psychological impulse to leave, increasing abandonment rates drastically.8

To understand the exact impact of wait times on user retention, we can examine the data trend surrounding the crucial three-second mark. As wait times increase without visual feedback, the drop-off is not gradual; it plummets steeply.

Wait Time in Seconds	User Retention Percentage	Impact Assessment
0s	100%	Optimal user experience
1s	95%	Slight break in cognitive flow
2s	80%	Noticeable frustration begins
3s	47%	Critical Threshold: 53% Abandonment
4s	30%	Severe user drop-off
5s	15%	App considered broken by majority

The data above, derived from Nielsen Norman Group research, shows a massive 53 percent drop-off in user retention when applications fail to provide visual feedback within three seconds.8 This highlights exactly why a loading spinner is essential for app survival.

On mobile devices, this drop-off is especially severe. The hidden economic impact of this abandonment is massive. For mid-market businesses, poor digital experiences and fixable abandonment issues cost hundreds of thousands of pounds annually.8 When users tap a button to submit a form and see no reaction, they tap it again. This leads to repeated submissions, which can trigger duplicate data entries or overwhelm the application's memory queue.

Key Takeaway: A spinner prevents dangerous user behaviour. By showing a clear visual cue, you stop users from repeatedly clicking a submit button, which prevents duplicate records in your database.

Providing an animated loading state does not make the data load any faster, but it changes the psychological perception of the wait time. A smooth, rhythmic animation signals that the system is working exactly as intended. Designing for various user types—whether they are novices, legacy users, or experts—leads to more inclusive systems.11 Reducing the cognitive load allows users to trust the system.12

According to Collab365's Power Apps benchmarks, implementing a simple, highly visible loading spinner reduces load abandonment by 40% and virtually eliminates duplicate form submissions caused by impatient tapping.13 We have seen this repeatedly across our Collab365 community workshops: adding a spinner is the cheapest, most effective UX upgrade available.

Method 1: Native Timer + Rotating Icon Spinner (Fastest, No Media Upload)

The absolute most efficient way to build a custom loading spinner in 2026 requires zero external files, zero media uploads, and zero complex code. It utilises the native Timer control and a standard Power Apps icon.2 Because it uses native components, it has virtually no impact on the application's overall file size.

We recommend starting with native methods, as we've seen in Collab365 workshops that this approach breaks less frequently than importing external assets. The logic is beautifully simple: a hidden timer runs continuously while a variable is true, and an icon uses that timer's value to calculate its rotation angle.

Key Takeaway: The Native Timer method is the safest route for corporate environments with strict data policies, as it requires zero external downloads or API calls to generate the animation.

Step-by-Step Implementation

1. Insert the Timer Control: Navigate to the Power Apps Studio. In the left-hand authoring menu, open the Insert pane.14 Search for the Timer control (Insert > Input > Timer) and add it to the screen.4

2. Configure Timer Properties:

Select the Timer. In the properties pane, set the following exact values:

• Duration: 900 (This dictates the speed of the rotation in milliseconds. 900ms provides a smooth, modern spin rate).2
• Repeat: true (This ensures the timer loops indefinitely).2
• Visible: false (The timer control itself should never be seen by the end user; it simply acts as the mathematical engine running in the background).
• Start: locShowSpinner (This binds the timer's activation to our loading variable).

3. Insert the Spinner Icon: Go back to the Insert pane and search for an icon. The Icon: Sync, Icon: Reload, or Icon: Gear work perfectly for this.2 Place the icon precisely in the centre of the screen.

4. Apply the Rotation Formula: Select the icon. Navigate to its Rotation property. Enter the following formula: Timer1.Value / 10.2 Alternatively, for absolute mathematical precision over a 360-degree cycle, we use: 360 * (Timer1.Value / Timer1.Duration). As the hidden timer counts up in milliseconds, this formula forces the icon to continuously rotate.15

5. Add the Protective Overlay: A loading spinner is useless if users can still click buttons in the background. Insert a standard Text Label. Delete the text. Resize the label so it covers the entire screen. Set its Fill property to RGBA(0, 0, 0, 0.1)—a subtle, transparent grey overlay.3 Ensure this label and the spinning icon sit at the very top of the Z-index (bring them to the front).

Key Takeaway: Always use a full-screen, semi-transparent label behind the loading icon. This captures errant clicks and prevents users from accidentally firing the same data-heavy function twice.

6. Control the Visibility:

Group the Icon, the Overlay Label, and the hidden Timer together. Set the group's Visible property to the boolean variable locShowSpinner.

7. Trigger the Animation: On the button that triggers the heavy data load (e.g., a "Save" button), wrap the operations using UpdateContext. This manages the state locally on the screen.3

Code snippet

UpdateContext({locShowSpinner: true});

//... Heavy Dataverse Patch or ClearCollect operations go here...
ClearCollect(colCustomerData, Filter(Customers, Status = "Active"));

UpdateContext({locShowSpinner: false});

When the user clicks the button, locShowSpinner becomes true. The transparent overlay blocks the screen, the hidden timer activates, and the icon begins its rapid rotation. Once the data operation finishes, the variable reverts to false, and the interface returns to normal.3

This method perfectly adheres to standard UI practices for Form Design and Gallery Design UX Guidelines, ensuring data integrity before submission and protecting against the loss of unsaved data.3

Method 2: SVG Animations for Custom Spinners (Lightweight & Scalable)

While the native timer method is incredibly fast to build, it relies on the standard Power Apps icon set. For organisations requiring branded, highly custom, or complex animations, Scalable Vector Graphics (SVGs) are the definitive solution in 2026.

For years, we used animated GIFs downloaded from sites like loading.io until SVGs changed everything.3 GIFs are a raster format, meaning they consist of individual frames of pixels.17 They are inherently heavy, take up valuable storage space inside the app package, and become blurry or pixelated when viewed on high-resolution smartphone screens. Furthermore, GIFs are limited to a 256-colour palette, which severely restricts modern UI design and makes gradients appear grainy.18

Key Takeaway: GIFs are dead in 2026 app development. They consume too much memory and lag on mobile devices. Always opt for mathematically rendered vector graphics.

SVGs solve all these problems. An SVG is an XML-based text file that uses mathematics to draw shapes, lines, and curves.17 Because an SVG is just code, it weighs a fraction of a kilobyte. A shopping cart icon isn't made of dots; it's made of instructions like "draw a rectangle here, curve this line at this angle".17 Power Apps 2026 supports SVG spinners at 90% smaller file sizes than traditional GIFs while maintaining perfect sharpness at any resolution.17

Embedding SVG Code via HTML Text Control

To avoid uploading any media files at all, we can paste SVG code directly into an HTML Text control or an Image control.

1. Acquire the SVG Code: Locate a modern SVG spinner online. Open the .svg file in a simple text editor (like Visual Studio Code) to view the raw XML code.16 It will start with <svg> and end with </svg>.
2. Insert an HTML Text Control:
   In the Power Apps Studio Insert pane, find and add the HTML Text control.
3. Format the Code for Power Apps: Power Apps requires specific formatting to render raw SVG text as an image. The code must be prefixed with data:image/svg+xml;utf8, and the SVG text must be URL-encoded using the EncodeUrl() function.20
   In the HtmlText property, enter the following pattern:
   Code snippet
   "<img src='data:image/svg+xml;utf8," & EncodeUrl("
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
   <circle cx='50' cy='50' r='40' stroke='#1A73E8' stroke-width='8' fill='none' />
   <animateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite' />
   </svg>
   ") & "' width='100%' height='100%'>"

Key Takeaway: Power Apps interprets SVGs best when they are wrapped in an <img> tag within the HTML Text control. Ensure you use single quotes inside the SVG string to avoid breaking the Power Fx formula.20

Because the SVG is essentially text within a Power Fx formula, we can inject Power Apps variables directly into the SVG code. For instance, replacing the hardcoded hex colour #1A73E8 with AppTheme.PrimaryColor allows the spinner to dynamically match your organisation's branding instantly.16

Method 3: Copilot-Powered Icons & Animations

The most significant shift in Power Apps development for 2026 is the integration of generative AI. Building complex SVG paths manually or writing intricate CSS animations is no longer a requirement. We can now use Microsoft Copilot within the Power Apps Studio to generate sophisticated UI elements entirely from text prompts.21

Copilot uses advanced Large Language Models—and increasingly, hyper-efficient Small Language Models (SLMs) integrated directly into devices—to understand design intent and output immediately usable code.23 The Collab365 team tested Copilot prompts across production tenants to determine the exact phrasing required to generate flawless loading elements.21

Key Takeaway: Copilot behaves best when given strict constraints. When prompting for loading icons, always specify the exact stroke width, hex colours, and animation timing to prevent hallucinated code.

Prompting Copilot for Spinners

To use this method, open the Copilot chat pane on the right side of the Power Apps Studio.24 The key to success is providing highly specific parameters. Broad prompts like "make a loading spinner" yield unpredictable results. Instead, use structured prompts specifying the technology, colour, and behaviour. This is often referred to as "vibe coding," where AI becomes the ultimate development partner.25

Example Prompt 1: The Corporate SVG

"Generate raw SVG code for a professional loading spinner. It should consist of an unbroken circle with a 4-pixel stroke, coloured deep navy blue. The circle should have a 45-degree gap. Apply an <animateTransform> tag so the circle completes a 360-degree rotation every 1.5 seconds. Provide only the code."

Example Prompt 2: The Modern CSS Pulse

"Create an HTML/CSS snippet for a loading animation. It should feature three small dots in a row. Use a bouncing animation where each dot rises and falls in sequence. The dots should be hex colour #005A9E. The output must be ready to paste into a Power Apps HTML Text control."

Copilot will generate the code block immediately.21 You simply copy the output and paste it into the HtmlText property of an HTML Text control. This drastically accelerates the development lifecycle, allowing us to prototype and deploy custom loading states in mere minutes without leaving the Power Apps environment.

The 2026 release wave also brings M365 Copilot chat directly into model-driven apps.24 This unified experience lets users ask questions and reason over in-app data. For developers, Copilot's ability to generate custom prompts as Power Fx functions means we can seamlessly integrate generative capabilities without writing complex code.22

Native Timer vs SVG vs GIF vs Lottie

Choosing the right methodology depends entirely on the application's specific requirements, branding constraints, and your comfort level with code.

The following table breaks down how the Native Timer, SVG, legacy GIF, and the highly anticipated Lottie format compare across key performance metrics. The 2026 wave 1 release introduces broader native capabilities, making Lottie files a powerful contender for modern app design.5

Loading Method	Implementation Ease	File Size Impact	Customisation Potential	Mobile Performance
Native Timer + Icon	Easiest (No code)	Zero (Native control)	Low (Fixed icons)	Excellent
SVG via HTML Text	Moderate (XML text)	Negligible (~40kb)	Very High (Dynamic colours)	Excellent
Copilot CSS	Easy (AI generated)	Negligible (~20kb)	High (Prompt tweaking)	Excellent
Lottie (Native 2026)	Moderate (JSON file)	Extremely Low	Supreme (State interactivity)	Excellent
Legacy Animated GIF	Easy (Upload media)	High (App memory bloat)	None (Static media file)	Poor (Frame lag)

Key Takeaway: SVGs offer the best balance of low file size and high customisation. However, Lottie files represent the pinnacle of vector animation for apps that require complex, multi-stage loading sequences.

Lottie files, originating from After Effects and exported as JSON data, provide the ultimate balance of complex animation and tiny file size.19 While SVGs are excellent for simple geometric spins, Lottie allows for intricate state machines and interactivity (e.g., a spinner that physically morphs into a green checkmark upon a successful data load, or adapts instantly to light/dark mode themes).19 We recommend migrating from GIFs directly to SVGs immediately, and subsequently exploring native Lottie controls as the 2026 wave features roll out across all tenants.

We should also note that the Power Apps modern controls update (based on the Fluent 2 design system) introduced a native Spinner control.29 This control is incredibly easy to use: it displays a state in motion and handles the spinning logic internally.32 However, the native Fluent spinner offers limited styling customisation. If your brand guidelines require specific shapes or complex animations, the SVG or Copilot methods remain superior.

Common Pitfalls & Fixes (We Learned These the Hard Way)

Even with modern methods, implementing loading states can introduce subtle bugs into the application. We frequently encounter the same operational hurdles during Collab365 coaching sessions. Here are the most common pitfalls and their immediate fixes.

• App Size Bloat from GIFs: As previously established, importing multiple animated GIFs into the Power Apps Media panel consumes vital memory. The application must load these media assets into the device's RAM upon startup.
  • The Fix: Audit the media library. Remove all animated GIFs. Replace them entirely with the SVG or Native Timer methods discussed above.16 Insert images as HTML text if there are more than 20 images to save memory.34
• The Timer Fails to Reset: When using the Native Timer method, a user clicks a button, the spinner shows, the data loads, and the spinner hides. However, upon clicking the button a second time, the spinner briefly stutters or fails to appear. This occurs because the Timer has not been reset to zero, and its internal logic is stuck.
  • The Fix: The Reset property of the Timer control must be configured correctly. Tie the Timer's Reset property to the opposite of the loading variable (e.g., !locShowSpinner). This ensures that the moment the spinner is hidden, the Timer is forced back to zero, ready for the next operation.3
• Delegation Warnings During Loads: Sometimes the loading spinner appears, but the actual data takes 15 to 20 seconds to load, frustrating the user anyway. This is frequently caused by a delegation issue, where Power Apps abandons server-side processing and attempts to pull thousands of raw records to the local device to filter them. By default, this limits you to 500 records.35
  • The Fix: The spinner cannot mask poor data architecture. Prioritise delegable calls over non-delegable calls.34 Ensure that all Filter and Search formulas applied to Dataverse or SharePoint lists use delegable functions. Avoid using complex conditional logic or unsupported formulas inside the data query.36
• Cross-Screen Reference Bottlenecks: Controls that reference other controls or variables from different screens can slow down navigation and loading. The app may load the referenced screen prematurely, causing inefficient delay loading.37
  • The Fix: Utilise a global variable or collection to distribute data across multiple screens instead of directly referencing controls.34
• The Screen is Still Clickable: A spinning icon appears, but the user clicks the "Submit" button three more times in rapid succession, creating duplicate database entries.
  • The Fix: Never deploy a spinner in isolation. Always pair it with a full-screen, invisible (or slightly shaded RGBA(0,0,0,0.1)) label that sits at the very top of the Z-index.3 This acts as a physical barrier, intercepting all clicks while locShowSpinner is true.

Key Takeaway: Always reset your loading variable in OnSuccess(). Furthermore, ensure your Timer control resets when the variable turns false. Failing to do so results in stuttering animations and broken visual logic on subsequent data loads.

Power Apps Performance Tips for Loading States

While a visually appealing loading spinner improves the psychological experience, a developer's primary objective must always be reducing the absolute mathematical loading time of the application. An app that loads in one second with no spinner is objectively superior to an app that loads in ten seconds with a beautiful SVG spinner.

Mastering the Concurrent Function

The most devastating performance mistake developers make is chaining data calls sequentially. When multiple ClearCollect formulas are separated by a standard semicolon (;), the application evaluates each formula sequentially.38 It waits for the first request to travel to the server, process, and return before starting the second request. If three tables take two seconds each, the user stares at the spinner for six seconds.

The Concurrent() function forces the application to evaluate multiple formulas specified within the same property at the same time.38

Code snippet

UpdateContext({locShowSpinner: true});

// Sequential (Slow - Do not use)
ClearCollect(colUsers, Users);
ClearCollect(colProducts, Products);
ClearCollect(colOrders, Orders);

// Concurrent (Fast - Highly Recommended)
Concurrent(
ClearCollect(colUsers, Users),
ClearCollect(colProducts, Products),
ClearCollect(colOrders, Orders)
);

UpdateContext({locShowSpinner: false});

With Concurrent(), the application only waits for the duration of the longest single request, rather than the sum of all request times.38 In the scenario above, the wait time drops from six seconds to just two seconds.39

Key Takeaway: The Concurrent() function is a mandatory optimisation tool. Web browsers inherently improve performance by performing network calls concurrently, and we must force Power Apps to do the same for data collections.39

Note that formulas inside a Concurrent block cannot depend on one another; they must be entirely independent data pulls.38 Power Apps will show an error if you attempt to create a dependency within the same concurrent function.39

Migrating to App.Formulas

Historically, developers placed massive amounts of variable declarations and data loads inside the App.OnStart property.38 The formulas there are executed when the application starts, forcing the application to evaluate thousands of lines of code before rendering the very first screen.40 This strains the system and results in agonizingly slow initial loading times.

In modern Power Apps architecture, we must shift from imperative App.OnStart logic to declarative App.Formulas.38 Named formulas act as static constants that are instantly available and managed by the platform itself.38

Because Power Apps Studio can analyse named formulas independently and defer their evaluation until the exact moment they are needed on a specific screen, transitioning to App.Formulas can drop Studio load times by as much as 80%.38 This drastically reduces the time a user spends staring at the initial splash screen spinner.

Intelligent Formula Usage

Beyond architecture, the specific formulas you write impact loading speeds.

• The With Function: Use the With function to evaluate a formula for a single record. It divides complex formulas into smaller, named subformulas, acting as self-contained local variables.38 This is far more efficient than evaluating the same calculation multiple times.
• The Coalesce Function: Use Coalesce to return the first non-blank value. It evaluates its arguments sequentially and stops immediately once a valid string is found.38 It is vastly more efficient than writing nested If(Not IsBlank(...)) logic, as it does not require values to be evaluated twice.38
• Preloading Data: Avoid using heavy LookUp functions inside gallery items. If a gallery displays fifty rows, a LookUp inside a label forces the app to query the server fifty separate times.36 Instead, preload that related data into a Collection and reference the local Collection, reducing network calls.36

Key Takeaway: The visual spinner is a fallback, not a solution. Aggressively optimise application logic using Concurrent(), App.Formulas, and With() to ensure the loading spinner is displayed for the shortest duration mathematically possible.

Real-World Example: We Built a Data-Heavy App with These

Theoretical knowledge must always survive contact with reality. Our team at Collab365 recently undertook a project to revamp a critical customer analytics dashboard that was suffering from severe abandonment rates.

The original application relied heavily on App.OnStart to download massive volumes of SharePoint lists. Furthermore, when users submitted their analytical filters, the application used an outdated, heavily pixelated GIF downloaded three years ago. The GIF alone weighed almost 2MB. Because the data filters were chained sequentially, users frequently stared at a jerky, low-resolution spinner for upwards of twelve seconds. Unsurprisingly, users assumed the dashboard was broken and routinely refreshed their browsers, abandoning the operation entirely.

The overhaul was swift and focused. First, we audited the media library. We deleted the 2MB GIF, instantly shedding dead weight from the app package. We replaced it with an inline SVG HTML text control, dynamically coloured using the organisation's primary theme variable. This change reduced the visual asset size from 2000 kilobytes to roughly 40 bytes.

Next, we tackled the performance. We wrapped the sequential data calls inside a Concurrent() function. Finally, we migrated the legacy variable setups to App.Formulas.

The result was transformative. The absolute mathematical loading time dropped from twelve seconds to under four seconds. Crucially, the perceived loading time felt even shorter. Because the new SVG spinner rendered instantly and rotated flawlessly, the application felt modern, responsive, and robust. User drop-off plummeted, and the helpdesk stopped receiving tickets regarding the application "crashing." Load times feel instant.

For developers looking to see these exact code snippets in action, joining the Power Apps Space on Collab365 Spaces provides access to working templates, in-depth discussions, and peer reviews of performance architecture.42 According to Collab365's Power Apps benchmarks, teams that standardise their loading methodologies across their tenant reduce app maintenance overhead significantly.13

Structured FAQ

1. Can I still use animated GIFs in my Power Apps?

While technically possible via the Media upload panel, it is highly discouraged in 2026. GIFs bloat the application package size, consume excessive RAM, scale poorly on high-resolution displays, and limit colour depth.3 The Native Timer, SVG, or Lottie methods are superior in every metric.

2. What is the best loading spinner approach for mobile devices?

Mobile devices thrive on mathematical rendering rather than pixel pushing. SVGs via HTML Text controls are the absolute best choice for mobile.17 They scale infinitely without losing quality and require practically zero bandwidth to render, preserving the mobile device's battery and processing power.

3. Why doesn't the Native Timer start immediately when the button is clicked?

This is almost always a variable scope issue. Ensure the Timer's Start property is tied precisely to the context variable (e.g., locShowSpinner). Additionally, verify that no blocking imperative logic (like a heavy LookUp) is placed before the UpdateContext function in the button's OnSelect property. The variable must flip to true first.

4. How do I prompt Copilot to make better spinners?

Avoid vague prompts. Use specific CSS terminology. For example: "Generate HTML and CSS for a loading spinner. Use a dual-ring animation. The outer ring should be solid #CCCCCC and the inner spinning ring should be #1A73E8. Make the animation last 1.2 seconds linearly." Providing strict design parameters prevents Copilot from hallucinating overly complex code.21

5. Are modern Fluent 2 controls automatically providing loading states?

Yes, the 2026 release wave introduces natively modernised controls, including a dedicated Fluent 2 Spinner control.29 While this drastically reduces manual setup, you must still manage the boolean variables that dictate when this modern control is visible and ensure it is paired with a transparent overlay to block user clicks.31 Furthermore, custom SVGs are still necessary if your brand guidelines prohibit the standard Fluent UI look.

Close

Do not wait for users to complain about frozen screens. The psychological damage of a slow application compounds with every click. A user who abandons an app due to poor performance is incredibly difficult to win back.

We recommend opening your most complex canvas app today and implementing Method 1: Native Timer + Rotating Icon Spinner. It takes less than five minutes to configure, requires no external assets, and immediately elevates the professional feel of the application.

Once comfortable with the boolean variables and overlay concepts, experiment with Copilot to generate branded SVG code or explore the native Lottie support rolling out in the 2026 wave. By mastering these lightweight, modern techniques, you ensure your applications feel lightning-fast, highly responsive, and deeply engaging.

To continue mastering Power Apps, dive into interactive workshops and challenges at the Collab365 Academy.42 For further UI tips, advanced performance metrics, and a supportive network of professionals, check the dedicated Power Apps Space on Collab365 Spaces. Join the conversation and start building faster today.

Sources

1. Get started with Power Apps - Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/intro-maker-portal
2. Power Apps - How to create a rotating gear animation - Automations 365, accessed April 6, 2026, https://automations365.com/power-apps-how-to-gear-animation/
3. Power Apps Loading Spinners, Saving Spinners and Progress Bars, accessed April 6, 2026, https://www.matthewdevaney.com/power-apps-loading-spinners-saving-spinners-and-progress-bars/
4. Timer control in Power Apps - Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-timer
5. Microsoft Power Platform 2026 release wave 1: What it means for your business, accessed April 6, 2026, https://www.randgroup.com/insights/microsoft/power-platform/microsoft-power-platform-2026-release-wave-1-what-it-means-for-your-business/
6. New and planned features for Power Apps, 2025 release wave 2 | Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-platform/release-plan/2025wave2/power-apps/planned-features
7. Overview of Power Apps 2026 release wave 1 | Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-platform/release-plan/2026wave1/power-apps/
8. The Silent Customer Exodus: Why 67% of Visitors Abandon Your Website Within Seconds, accessed April 6, 2026, https://medium.com/@robert_86334/the-silent-customer-exodus-why-67-of-visitors-abandon-your-website-within-seconds-70f270bdd822
9. The Need for Speed, 23 Years Later - NN/G, accessed April 6, 2026, https://www.nngroup.com/articles/the-need-for-speed/
10. Website Response Times - NN/G, accessed April 6, 2026, https://www.nngroup.com/articles/website-response-times/
11. Application Design Articles, Videos, Reports, and Training Courses - NN/G, accessed April 6, 2026, https://www.nngroup.com/topic/applications/
12. Few Guesses, More Success: 4 Principles to Reduce Cognitive Load in Forms - NN/G, accessed April 6, 2026, https://www.nngroup.com/articles/4-principles-reduce-cognitive-load/
13. Beginner's Guide to PowerApps eBook | PDF | Microsoft Excel | Mobile App - Scribd, accessed April 6, 2026, https://www.scribd.com/document/580097483/Beginners-Guide-to-PowerApps-eBook-v2
14. Understand Power Apps Studio: Components and Features - Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/power-apps-studio
15. Creating a Loading Animation in Power Apps - Pascalcase, accessed April 6, 2026, https://pascalcase.com/Home/Blog/creating-a-loading-animation-in-power-apps
16. How to use SVG to create spinner in Power Apps - 365 Corner, accessed April 6, 2026, https://365corner.pl/2022/01/11/how-to-use-svg-to-create-spinner-in-power-apps/
17. SVG Icons: Everything Designers & Developers Need to Know in 2026 - IamVector, accessed April 6, 2026, https://iamvector.com/blog/svg-icons/
18. GIF vs SVG: A Developer's Guide to Understanding Animation Formats | Cloudinary, accessed April 6, 2026, https://cloudinary.com/guides/image-formats/gif-vs-svg
19. The Lottie Power Stack 2026 | LottieFiles, accessed April 6, 2026, https://lottiefiles.com/blog/inside-lottiefiles/the-lottie-power-stack-2026
20. SVG's inside HTMLtext controls : r/PowerApps - Reddit, accessed April 6, 2026, https://www.reddit.com/r/PowerApps/comments/1hyylfc/svgs_inside_htmltext_controls/
21. Transform Your Power Apps UI with SVG Animations - YouTube, accessed April 6, 2026, https://www.youtube.com/watch?v=qlCVDtfBvYE
22. Use your prompt in Power Apps | Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/ai-builder/use-a-custom-prompt-in-app
23. The UX Reckoning: Prepare for 2025 and Beyond - NN/G, accessed April 6, 2026, https://www.nngroup.com/articles/ux-reset-2025/
24. What's new in Power Platform: February 2026 feature update - Microsoft, accessed April 6, 2026, https://www.microsoft.com/en-us/power-platform/blog/power-apps/whats-new-in-power-platform-february-2026-feature-update/
25. We built a Power App with ONE AI Prompt (Vibe Coding with GitHub Copilot) - YouTube, accessed April 6, 2026, https://www.youtube.com/watch?v=m3UN_ZQYzWQ
26. What's new in Power Platform: March 2026 feature update - Microsoft, accessed April 6, 2026, https://www.microsoft.com/en-us/power-platform/blog/power-apps/whats-new-in-power-platform-march-2026-feature-update/
27. jondot/awesome-react-native - GitHub, accessed April 6, 2026, https://github.com/jondot/awesome-react-native
28. LottieFiles for Adobe After Effects - aescripts.com, accessed April 6, 2026, https://aescripts.com/lottiefiles/
29. Recent modern control updates in canvas apps - Power Apps - Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/modern-control-updates
30. Overview of modern controls and theming in canvas apps - Power Apps - Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/overview-modern-controls
31. Discover the Power of Modern Controls for Power Apps - Dynamics4Business, accessed April 6, 2026, https://dynamics4business.nl/en/blogs/discover-the-power-of-modern-controls-for-power-apps/
32. Spinner control reference - Power Platform - Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/spinner
33. Modern controls and properties in canvas apps - Power Apps | Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/modern-controls-reference
34. Power Apps Development: Best Practices and Essential Tips - TechAhead, accessed April 6, 2026, https://www.techaheadcorp.com/blog/power-apps-development-best-practices-essential-tips/
35. Improve App Performance - Microsoft Power Platform Community, accessed April 6, 2026, https://community.powerplatform.com/forums/thread/details/?threadid=4bef1e15-80af-43b0-874c-5a2f04b7e1e3
36. Optimizing Power Apps Performance for Large Datasets - DEV Community, accessed April 6, 2026, https://dev.to/amruthalak3498/optimizing-power-apps-performance-for-large-datasets-2mmf
37. Identify and mitigate canvas app performance issues - Power Platform | Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-platform/architecture/key-concepts/performance/top-issues
38. Code optimization - Power Apps - Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-apps/guidance/coding-guidelines/code-optimization
39. Concurrent function - Power Platform - Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-platform/power-fx/reference/function-concurrent
40. Rethinking the App OnStart property to improve Power Apps performance - Forward Forever, accessed April 6, 2026, https://forwardforever.com/rethinking-app-onstart/
41. Speed up app or page load in Power Apps - Microsoft Learn, accessed April 6, 2026, https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/fast-app-page-load
42. Power Apps Training - Build No-Code Apps for your Business | Collab365 Academy, accessed April 6, 2026, https://academy.collab365.com/training/microsoft-365/power-apps-training/
43. How we're automating Collab365 with Power Platform and AI - YouTube, accessed April 6, 2026, https://www.youtube.com/watch?v=x9ZM-Y0k2vs
44. Beginner's Guide to Power Apps | PDF | Mobile App | Variable (Computer Science) - Scribd, accessed April 6, 2026, https://www.scribd.com/document/814539595/Beginners-Guide-to-Power-Apps