Written by

Jayakumar Balasubramaniam

Share

  

Category

see all categories
intranet as a service

Display custom text in SPFx Loading Indicator

SharePoint Framework is evolving day by day and lot more features been introduced daily. As we know while the SharePoint Apps loading indicator will be displayed in the webpage which is under Microsoft’s control.

For example, in Provided hosted app we will get loading indicator as “Working on it”. In SPFx apps we will get it as “Loading WebPartName”. How wonder if we could change the Loading indicator display text, or show/hide from the page in SPFx? Yes, this time Microsoft gives that control with us in SPFx app development model.

How to customize SPFx Loading Indicator?

SPFx enables this feature by the method called displayLoadingIndicator which is available under the StatusRenderer option of Current context, example in your BaseClientSideWebPart you can access this method as below,

this.context.statusRenderer.displayLoadingIndicator

How to change the Display text in SPFx Loading Indicator?

The default loading indicator and text in the SPFx app will be like this

Loading SPFx

We can change the display text with the below piece of code in your webpart render method,

this.context.statusRenderer.displayLoadingIndicator(this.domElement, "custom text");

this keyword refers to your WebPart, since we are changing the WebPart’s loading, the target element (first parameter) will be domElement.

Loading custom text

How to display SPFx Loading Indicator inside custom element?

The same displayLoadingIndicator can be used for this purpose, the only change will be the targeted element, let see some example here.

Let’s create two div and append it in DomElement like below,

this.domElement.innerHTML = `<div id="firstDiv"></div>                                

                                <div id="secondDiv"></div>`;

   this.context.statusRenderer.displayLoadingIndicator(document.getElementById("firstDiv"), "first-div");

    this.context.statusRenderer.displayLoadingIndicator(document.getElementById("secondDiv"), "second-div");

The output will be like below, you can find two loading indicators displayed in our custom div.

Loading first dev

How to clear the SPFx Loading Indicator?

SPFx do have a simple option for that as well by the method called clearLoadingIndicator which is available under the StatusRenderer option of Current context.

The only input parameter to passed is the targeted element.

If you want to hide the loading indicator which comes in initial app loading, use the below code by targeting domElement.

this.context.statusRenderer.clearLoadingIndicator(this.domElement);

If you want to hide the loading indicator which comes in your custom element, use the below code by targeting specific element.

this.context.statusRenderer.clearLoadingIndicator(document.getElementById("firstDiv"));

this.context.statusRenderer.clearLoadingIndicator(document.getElementById("secondDiv"));

This article describes about hide/show/changing text in SPFx loading indicator.

How to build SharePoint Framework Applications?

The following blog posts will help you for sure in detail about building SPFx applications,

                   Build SPFx webparts with Angular 4

                   Deep Dive into SPFx webparts configuration

                   Build SPFx extensions

                   Integrating SPFx apps with visual Studio

If you have any questions/issues about this article, please let me know in comments.

Jayakumar Balasubramaniam

Written by Jayakumar Balasubramaniam

A technology evangelist working on Microsoft 365, SharePoint & Azure. Gets my hands dirty with latest and greatest of SharePoint, Azure & front-end frameworks. Currently working with “Hubfly – A unified digital workplace” as a Product Engineer. Getting in to the depth of the domain & technology, with my eyes for perfection, ensures that the product releases go right every time.