Forum Discussion
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)
- Add a text box near slicers or buttons saying:
- Please wait a few seconds after changing a filter while the visuals refresh
- Use buttons and bookmarks instead of exposing many slicers at once:
- to Show Top 10
- to Show Top 20
- Button to reset filters
- 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.- Add a text box near slicers or buttons saying:
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!
- 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?
- 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.
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)
- Add a text box near slicers or buttons saying:
- Please wait a few seconds after changing a filter while the visuals refresh
- Use buttons and bookmarks instead of exposing many slicers at once:
- to Show Top 10
- to Show Top 20
- Button to reset filters
- 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.- Add a text box near slicers or buttons saying: