Applies to SharePoint Framework (SPFx)

When making SharePoint Framework (SPFx) client side webparts, it’s common to load some data from somewhere else and then display it on the screen. Even if that data is just coming from a local list these requests are performed asynchronously and you should indicate to a user that the operation may take some time. The easiest way to do this is through the loading indicator. Here’s how it looks by default:

Did you know that you can easily show/hide this indicator and even customize the text? You can even decide where it’s displayed. WOWEE!

To show the Loading Indicator you can simply call this.context.statusRenderer.displayLoadingIndicator where the this refers to your BaseClientSideWebPart. This method takes 2 parameters.

The first parameter is the element where you want the loading indicator to be displayed. Typically if you are calling this from the main render method in your webpart, you’ll just specify this.domElement. However, you can easily specify any other element (see below for an example). Just be aware that the default styles are currently pretty large.

The second parameter is the text you want to display between Loading and …

Loading indicator with some custom text:

this.context.statusRenderer.displayLoadingIndicator(this.domElement,"Some Stuff");

Loading indicator inside a custom element with custom text:

this.domElement.innerHTML = `
  <div class="${styles.loadingIndicator}">
    <div class="${styles.row}">
      <div class="${styles.container}">
        <span class="ms-font-xl">Critical Information:</span>
        <div class="${styles.specialbox}" id="myspecialbox">
        </div>
        <span class="ms-font-xl">Static text, wowee!</span>
      </div>
    </div>
  </div>`;

//Show the loading indicator inside an element
this.context.statusRenderer.displayLoadingIndicator(document.getElementById("myspecialbox"),"Some Stuff");

Hiding the Loading Indicator:

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

You can find a sample project here: https://github.com/thechriskent/spfxLoadingIndicator

You can download the whole project and run it, or just take a look at the main webpart file.