SharePoint Framework: Loading icon in property pane

Question

I wanted to show loading icon on the drop down present in property pane, till it does not get the data. I am unable to find what needs to be passed to in

this.context.statusRenderer.displayLoadingIndicator([Property pane reference], 'lists')

Any help/pointers appreciated.

Answer 1

A little late to this answer, but you can follow the below approach:

1) Create 2 private variables, _listOptions of type IPropertyPaneDropdownOption and loadingIndicator of type boolean (set it to true) in your base webpart class.

It would be somewhat as below:

export default class HelloWorldWebPartWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

  private _listOptions: IPropertyPaneDropdownOption[];
  private loadingIndicator:boolean = true;

2) In your getPropertyPaneConfiguration method, there is a property named showLoadingIndicator of type boolean. Set this to the above defined loadingIndicator variable.

The method should look somewhat as below:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {  
      showLoadingIndicator: this.loadingIndicator,    
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [              
                PropertyPaneDropdown('list', {
                  label: 'Select List',
                  options: this._listOptions                  
                })
              ]
            }
          ]
        }
      ]
    }
}

3) Now, we will populate the dropdown with dynamic values. For that we need to override the onPropertyPaneConfigurationStart method. I am using the list names as values, it could be any other REST API call returning JSON. Here, once the values are fetched, we will hide the loading indicator. The method is quite self explanatory.

protected onPropertyPaneConfigurationStart(): void {

    this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Lists/?$select=Id,Title&$filter=Hidden ne true&$orderby Title`, SPHttpClient.configurations.v1)
    .then((response: SPHttpClientResponse) => {
      var options: Array<IPropertyPaneDropdownOption> = new Array<IPropertyPaneDropdownOption>();

      response.json().then((data) => {
          options.push( { key: "", text: "Select List" });
          data.value.forEach(list => {
              options.push( { key: list.Id, text: list.Title });
          });
          //since the returned values are pre-ordered, just return the list of lists
          this._listOptions = options;

          //set the loading indicator to false and render the property pane
          this.loadingIndicator = false;

          this.context.propertyPane.refresh();          
          this.render();

      });
    });
  }

End result :