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 :
