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 Pro...
Need Help
Tips and Tricks
  • Ahmed-Elfeel's avatar
    Ahmed-Elfeel
    2 months 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
    2 months 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.
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
    2 months 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
      Super User
      2 months 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.