Customizing the Loading Indicator in an JS Embedded Application

Published:

Customizing the Loading Indicator in an Embedded Application

This article offers a step-by-step guide for customizing the loading indicator in a JavaScript-embedded application.

Use cases:

A customized loading indicator can be used to hide individual widget loadings in a dashboard, offering a unified visual until all widgets are fully loaded. This improves the user experience by preventing incomplete visuals during data loading.

Steps to Implement a Custom Loading Indicator

1. Create a Custom Loader Element

Add a <div> element for the custom loading indicator in your .cshtml file:

<div id="custom-loader" style="display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:white; z-index:9999;">
    <img src="~/icon/loadingIndicator.jpg" alt="Loading..." style="position:absolute; top:50%; left:50%; background-color:white; transform:translate(-50%, -50%);" />
</div>

Note: Please add the custom loading icon in your application.

2. Hide the Default Loading Indicator

Disable the default loading indicator by adding the following CSS in your stylesheet to target and hide it:

#dashboard_embeddedbi_designAreaContainer_WaitingPopup {
    display: none !important;
}

3. Show and Hide the Custom Loader Using Events

Utilize the actionBegin and actionComplete events in index.js file to control the display of the custom loading indicator:

actionBegin: function(args) {
    if (args.eventType === 'renderLayout' || args.eventType === 'renderDashboard' || args.eventType === 'renderWidget') {
        document.getElementById('custom-loader').style.display = 'block';
    }
},

actionComplete: function(args) {
    if (args.eventType === 'dashboardRendered') {
        document.getElementById('custom-loader').style.display = 'none';
    }
}

actionBegin: This event checks for specific rendering actions (renderLayout, renderDashboard, or renderWidget). When any of these occur, it displays the custom loader by setting its display style to block.
actionComplete: This event verifies if the dashboard rendering has been completed (dashboardRendered). Upon completion, it hides the custom loader by setting its display style to none.