Async data fetch in the property pane

There was some discussion earlier regarding fetching data for the property pane (say a dropdown showing Lists), and we had a few different ways of fetching the data, none of which were particularly pleasant. Often it meant kicking off a request in onInit and either a) blocking the rest of the webpart until it came back or b) hoping it came back by the time it was needed.

Neither of those worked particularly well for "cascading" choices, say you first need to fetch a list, then you need to select a column on the list. One idea we were toying with was having an "onInit" for the property pane that would be called each time it is rendered. We did some prototyping around this, but some of the experience was poor, as you could wind up with no property pane while the async code is waiting to complete.

Turns out we can use the APIs we already have. Here's what you do

1 - Don't put any code in OnInit

2 - In your propertyPaneSettings method, if you need additional data, kick off the request and at the end call this.context.propertyPane.refresh(); So something like this: `

if (!this.listsFetched) {
  this._getListData()
    .then((response) => {
      this._dropdownOptions = response.value.map((list: ISPList) => {
        return {
          key: list.Id,
          text: list.Title
        };
      });
      this.listsFetched = true;
      this.context.propertyPane.refresh();
    });
}

`

3 - Return the correct properties for the data you currently have. Put nice messages for the data that is being fetched, and replace them with the correct controls when the data comes back.

Give that flow a try and let us know in the issues list if you encounter strangeness.