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.configurationStart(); 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.configureStart();
    });
}

`

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. We are aware of two issues that we are working on:

1. Once the promise is resolved web part calls configure start and this call will make property pane render the first page, though user was on some other page. Started working on a fix.

2. Major one - when web part 1 is waiting on a promise and user switches web parts, property pane for the new web part will be shown. However the moment when the promise comes back and triggers a configure start call. Property pane switches back to show properties of web part 1. Working on this fix too.