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

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)

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