SPFx web part does not render the React content after clearLoadingIndicator was called

[SamueleFurnari]

Hi everybody,

i'm using the 1.14.0 version of SharePoint Framework and I want to show the loading indicator.

As reported in the tutorials and documentations, I'm using

this.context.statusRenderer.displayLoadingIndicator(this.domElement, strings.LoadingViewsText);

to show the indicator, and

this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();

to hide it.

The problem is that when I remove the indicator, the React component wasn't redendered.

Searching on internet, I found the #6854 issue that state that there is a problem but that it was fixed with the 1.14.0 release.

Where am i wrong and how I can solve my problem?

Thanks
Samuele

[AJIXuMuK]

Hi @SamueleFurnari,
As described in the issue you've mentioned - you need to provide your own clearDomElementCallback when calling displayLoadingIndicator to make it work.

[SamueleFurnari]

Hi @AJIXuMuK,
thanks for your reply!

I forgot to say that I've tried to use the callback as described in the issue but that I doesn't know how to use it.

My requirement is very easy: I want to remove the loadingIndicator's div and replace it with the react element rendered by the web part. I've tried to save the element passed as the callback parameter in a local var, and than re-render it in the render method as a domElement child, but this does not take effect.

Can you help me to unterstand where am I wrong?

Thank you!

[AJIXuMuK]

If you're using React, you callback should contain a code to correctly clean DOM element where the indicator will be shown. And do that in "React" way:

private clearDomNode = (domNode: HTMLElement): void => {
    ReactDom.unmountComponentAtNode(domNode);
  }

Here is the sample: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-custompropertypanecontrols

[SamueleFurnari]

Thanks a lot!!!