Forum Discussion

Venkatesh_'s avatar
Venkatesh_
Helper I
2 months ago
Solved

How to enhance or enlarge the visual loading indicator / spinner for better user interactions

Hi everyone,
I am working on enhancing the user experience for a Power BI report where users frequently interact with visuals to change rankings, click slicers, and cross-filter heavy data.
The Problem:
When users interact with a visual (like toggling a ranking metric), the native loading indicator (the tiny spinning wheel in the visual header) is extremely small and easy to miss. Because there is no prominent feedback that the report is actively processing the calculation, users assume the click didn't register. They end up clicking frantically, which hurts usability and further lags the report.
What I've Checked:
  • I checked the Current File > Report settings menu in Power BI Desktop, but the older preview option for "Display a loading indicator for visuals" is no longer available in my current version.
  • I currently have "Use the modern visual header with updated styling options" enabled, but the native processing icon remains too small for our user base.
What I'm Looking For:
Since I cannot use the native preview checkbox to change the loading animation size, what are the best workarounds or design patterns to make loading states highly visible to end-users?
Need Help
Tips and Tricks
  • Ahmed-Elfeel's avatar
    Ahmed-Elfeel
    1 month ago

    Hi Venkatesh_,

    I hope you are doing well today and sorry for late in reply but i was sick ☺️✨

    So for Power BI Embedded  (JavaScript loading overlay) :

    • Create an HTML overlay:
    <div id="loading-overlay" style="
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.7);
    justify-content:center;
    align-items:center;
    z-index:9999;">
    <div class="spinner"></div>
</div>
    • Then listen for report events:
    report.on("renderingStarted", function () {
    document.getElementById("loading-overlay").style.display = "flex";
});

report.on("rendered", function () {
    document.getElementById("loading-overlay").style.display = "none";
});

    When the report starts rendering the overlay appears once rendering finishes it disappears (Users can not keep clicking while the overlay is displayed) also keep in mind:

    • this only applies if your report is embedded in your own web application (using the Power BI JavaScript SDK) It does not work in Power BI Desktop or the Power BI Service
    • do not forget also to check the version of the Power BI JavaScript SDK you are using as available events can vary (cause some implementations use the rendered event while others may require different event handling)
     
     
  • Ahmed-Elfeel's avatar
    Ahmed-Elfeel
    1 month ago

    And for Prevent repeated clicks in a standard Power BI report :

    this will be likely as a visual or UI/UX workaround (I usually use one of these ideas)

    1. Add a text box near slicers or buttons saying:
      • Please wait a few seconds after changing a filter while the visuals refresh
    2. Use buttons and bookmarks instead of exposing many slicers at once:
      • to Show Top 10
      • to Show Top 20
      • Button to reset filters
    3. Add a transparent shape with instructional text on a bookmark if you have a multi step interaction telling users the report is processing before they continue
    if this post helps, then I would appreciate a thumbs up and mark it as the solution to help the other members find it more quickly.

9 Replies

  • v-ssriganesh's avatar
    v-ssriganesh
    Community Support
    2 months ago

    Hi Venkatesh_,

    Thank you for posting your query in the Microsoft Fabric Community Forum, and thanks to Rupa01 for sharing valuable insights.

     

    Could you please confirm if your query has been resolved by the provided solutions? This would be helpful for other members who may encounter similar issues.

     

    Thank you for being part of the Microsoft Fabric Community.

  • Rupa01's avatar
    Rupa01
    Solution Sage
    2 months ago

    Hi Venkatesh_,

     

    Currently, Power BI does not support customizing the native loading spinner (size, style, or color) shown in visuals during interactions. This behavior is built-in and not exposed for formatting. You can focus on performance optimization, but the default spinner itself cannot be modified. You can suggest this as an idea in Fabric Ideas - Microsoft Fabric Community to improve Power BI.

     

    💡 Helpful? Give a Kudos 👍 — keep the community growing
    ✅ Solved your issue? Mark as Solution ✔️ — help others find it faster

    Best regards,
    Rupasree Achari | BI & Fabric Analytics Engineer
    • Rupa01's avatar
      Rupa01
      Solution Sage
      2 months ago

      Venkatesh_ , did you get a chance to review the solution provided?

      If it helped resolve your issue, please consider marking it as Accepted Solution so it can benefit others in the community as well.

      Let me know if you need any further assistance! 👍

  • Ahmed-Elfeel's avatar
    Ahmed-Elfeel
    Super User
    2 months ago

    Hi Venkatesh_,

    I hope you are doing well today ☺️❤️

     

    So I am sorry to say this but unfortunately the native visual loading indicator in Power BI cannot currently be resized or customized Cause Microsoft doesnt expose any settings to enlarge the spinner or replace it with a different loading animation.

     

    But the good side is that you can do it through some workaround such as:

    1. Optimize report performance so visuals render faster and reducing the need for a noticeable loading indicator
    2. Disable repeated clicks by adding instructional text (for example Please wait while visuals refresh) or using bookmarks/buttons to guide users through interactions
    3. Use a custom visual (such as HTML Content or an animated GIF) that displays a larger spinner based on a DAX measure also Keep in mind that DAX measures are only evaluated after the query completes so this serves as an empty state indicator rather than a true loading indicator during query execution
    4. For Power BI Embedded use the JavaScript API to listen for rendering events (such as renderingStarted and rendered) and display a full-page loading overlay (This is the only approach that provides a true and highly visible loading experience while visuals are actually processing)

    Note: If you want to know more about any of these workarounds just reply to me with the one you want to know more about

     

    But at the moment there isnt a built-in way in Power BI Desktop or the Power BI Service to enlarge or replace the native visual loading spinner.

     

    if this post helps, then I would appreciate a thumbs up and mark it as the solution to help the other members find it more quickly.
    • Venkatesh_'s avatar
      Venkatesh_
      Helper I
      2 months ago

      HI Ahmed-Elfeel  Thanks for your detail feedback, I'm using a DirectQuery model, and what I'm really looking for is a more prominent loading indicator or a clear message that lets users know the report is actively querying data.

      Thanks  again for your help!

       

      1. For Power BI Embedded use the JavaScript API to listen for rendering events (such as renderingStarted and rendered) and display a full-page loading overlay (This is the only approach that provides a true and highly visible loading experience while visuals are actually processing) - My reports are embedded, so this sounds like it could be a suitable solution. Would you be able to provide some guidance or steps on how to implement this approach?
      2. Disable repeated clicks by adding instructional text (for example Please wait while visuals refresh) or using bookmarks/buttons to guide users through interactions - If this is a simple and quick solution to implement, I would be very interested in learning more about it as well.
      • Ahmed-Elfeel's avatar
        Ahmed-Elfeel
        Super User
        1 month ago

        Hi Venkatesh_,

        I hope you are doing well today and sorry for late in reply but i was sick ☺️✨

        So for Power BI Embedded  (JavaScript loading overlay) :

        • Create an HTML overlay:
        <div id="loading-overlay" style="
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.7);
    justify-content:center;
    align-items:center;
    z-index:9999;">
    <div class="spinner"></div>
</div>
        • Then listen for report events:
        report.on("renderingStarted", function () {
    document.getElementById("loading-overlay").style.display = "flex";
});

report.on("rendered", function () {
    document.getElementById("loading-overlay").style.display = "none";
});

        When the report starts rendering the overlay appears once rendering finishes it disappears (Users can not keep clicking while the overlay is displayed) also keep in mind:

        • this only applies if your report is embedded in your own web application (using the Power BI JavaScript SDK) It does not work in Power BI Desktop or the Power BI Service
        • do not forget also to check the version of the Power BI JavaScript SDK you are using as available events can vary (cause some implementations use the rendered event while others may require different event handling)
         
         
  • v-csrikanth's avatar
    v-csrikanth
    Community Support
    1 month ago

    Hi Venkatesh_ 
    We would like to inquire whether have you got the chance to check the solutions provided by other users in commiunity to resolve the issue. We hope the information provided helps to clear the query. Should you have any further queries, kindly feel free to contact the Microsoft Fabric community.


    Thanks 
    Srikanth Cheri.

  • william1234's avatar
    william1234
    Helper II
    1 month ago

    Unfortunately, the native Power BI loading spinner can't be resized or customized anymore. Your best option is to optimize report performance and use UX cues (instructions, buttons, or page messaging) so users know the report is processing and avoid repeated clicks.