SharePoint Framework is evolving day by day and a lot more features have been introduced. The SharePoint Apps loading indicator will display in the webpage which is under Microsoft’s control.
For example, in the provided hosted app we will get a loading indicator as “Working on it”. In SPFxapps we will get it as “Loading WebPartName”. How wonderful if we could change the Loading indicator display text, or show/hide from the page in SPFx? Yes, this time Microsoft gives that control to us in SPFx app development model.
How to customize SPFx Loading Indicator?
SPFx enables this feature by a method called displayLoadingIndicator which is available under the StatusRenderer option of Current context,. You can access this method as below:
- this.context.statusRenderer.displayLoadingIndicator
How to change the Display text in SPFx Loading Indicator?
The default loading indicator and text in the SPFx app will be like this:
We can change the display text with the below piece of code in your web part render method:
- this.context.statusRenderer.displayLoadingIndicator(this.domElement, "custom text");
This keyword refers to your WebPart, and since we are changing the WebPart’s loading, the target element (first parameter) will be domElement.
How to display SPFx Loading Indicator inside custom element?
The same displayLoadingIndicator can be used for this purpose, the only change will be the targeted element, let's see some examples here.
Let’s create two divs and append them in the DomElement like below:
- this.domElement.innerHTML = `<div id="firstDiv"></div>
- <div id="secondDiv"></div>`;
- this.context.statusRenderer.displayLoadingIndicator(document.getElementById("firstDiv"), "first-div");
-
- this.context.statusRenderer.displayLoadingIndicator(document.getElementById("secondDiv"), "second-div");
The output will be like below, you can find two loading indicators displayed in our custom div.
How to clear the SPFx Loading Indicator?
SPFx does have a simple option for that as well by the method called clearLoadingIndicator which is available under the StatusRenderer option of Current context.
It's the only input parameter to pass the targeted element.
If you want to hide the loading indicator which comes in initial app loading, use the below code by targeting domElement.
- this.context.statusRenderer.clearLoadingIndicator(this.domElement);
If you want to hide the loading indicator which comes in your custom element, use the below code by targeting a specific element.
- this.context.statusRenderer.clearLoadingIndicator(document.getElementById("firstDiv"));
- this.context.statusRenderer.clearLoadingIndicator(document.getElementById("secondDiv"));
This article describes hide/show/change a text in SPFx loading indicator.
How to build SharePoint Framework Applications?
The following blog posts will definitely help you in detail to build SPFx applications:
If you have any questions/issues about this article, please let me know in the comments.