Customize the Dashboard Loading Experience in Bold BI Using JavaScript Embedding

When embedding a Bold BI dashboard using the JavaScript SDK, the widget loading skeleton, widget loading progress displayed in the banner, and detailed loading status for individual widgets are enabled by default to provide users with visual feedback and status updates while the dashboard is loading. Depending on your application requirements, you can disable these indicators using the dashboardExperience settings. This article provides guidance on how to disable specific loading indicators in a JavaScript embedded application.

Disable Widget Loading Progress

To disable the Widget Loading Progress panel that displays the loading status of individual widgets, set the showInDetailsView property to false.

settings: {
   dashboardExperience: {
     widgetProgress: {
        showInDetailsView: false,
     }
   }
} 

Disable widgets Skeleton Loading

To disable the skeleton loading animation displayed while the dashboard is loading, set enableSkeletonLoading to false.

settings: {
   dashboardExperience: {
       enableSkeletonLoading: false
   }
} 

Disable Widget Progress Banner

To hide the widget loading progress banner displayed at the top of the dashboard, set showInBanner to false.

settings: {
   dashboardExperience: {
       widgetProgress: {
        showInBanner: false,
       }
   }
} 

Disable Widget Loading Indicators

To hide widget-level loading indicators displayed during dashboard loading, set showInWidgets to false.

settings: {
   dashboardExperience: {
       widgetProgress: {
           showInWidgets: false
       }
   }
} 

Disable All Loading Indicator

To completely disable all loading indicators, including widget skeleton loading, widget loading progress, and widget status details, use the following configuration:

function renderDashboard(dashboardId) {
   getEmbedToken()
       .then(accessToken => {
           const dashboard = BoldBI.create({
               serverUrl: rootUrl + "/" + siteIdentifier,
               dashboardId: dashboardId,
               embedContainerId: "dashboard",
               embedToken: accessToken,
               settings: {
                   dashboardExperience: {
                       enableSkeletonLoading: false,
                       widgetProgress: {
                           showInBanner: false,
                           showInDetailsView: false,
                           showInWidgets: false
                       }
                   }
               }
           });

           dashboard.loadDashboard();
       })
       .catch(err => {
           console.error("Error rendering dashboard:", err);
       });
} 

Result

By configuring the dashboardExperience settings, you can control the visibility of dashboard and widget loading indicators in your embedded application. This allows you to tailor the loading experience based on your application’s UI and user experience requirements.

Note: All dashboard experience settings are enabled by default. Configure the corresponding property only when you want to disable a specific loading indicator.