Showing a spinner when dynamically loading resources for your SPFx property pane

In your SharePoint Framework web parts, you have the option to load resources dynamically. These resources could be data you want to fetch or dynamically load controls before the property pane panel gets shown. To achieve this, you implement the logic in the loadPropertyPaneResources method.

Info: You can find more information about dynamically loading controls here: Special property pane dynamic loading.

The issue

The issue with dynamically loading resources/controls for the property pane is the user experience. When you open the property pane for the first time, all these resources need to be loaded, and during that time, you get to see just an empty white panel.

What can you do?

Version 1.17.0 from @pnp/spfx-property-controls dependency includes a couple of helpers. These helper methods focus on making this experience much better.

To make it work, you have to implement this property pane spinner as follows:

Once this is implemented, you and your users will see the following experience.

Info: You can find the documentation of the helper here: PropertyPaneHelpers.

Hope this makes your web part experience better as well