We are developing a SPFx webpart and are using SP Pnp JS to fetch and update list items. Previously we used AngularJS where we write a directive to capture any $http events and show a loading indicator to the user while it is getting executed.

I wanted to check if there is any way where we can write a common code to capture all the ajax requests from SP PnP JS to display a loading indicator to the user while the ajax request is getting executed.


You can use the displayLoadingIndicator method available in SPFx. Using it you can show the loading indicator on a DOM element and clear it out using clearLoadingIndicator method once the data is retrieved.

You can use the below sample code:

public render(): void {

        // show indicator 
        this.context.statusRenderer.displayLoadingIndicator(document.getElementById("webpartId"), "Fetching list data");

        pnp.sp.web.lists.getByTitle("Custom List").items.get().then(d => {            

        // clear indicator once the request is completed

         console.log("List items fetched");


Reference - Taking Advantage of the Loading Indicator in the SharePoint Framework

Another option if you can choose is the Office UI Fabric's spinner component which can displayed or hidden based on the state.

You can modify from below sample code in React:

constructor() {

    // code omitted for brevity
    this.state = {
        loading: true,
        items: [],
        error: null

private _fetchRecentDocuments() {

    pnp.sp.web.lists.getByTitle("Custom List").items.get().then(items => {
                loading: false,
                listItems: items,
        }).catch(d => {
                error: JSON.stringify(d)

public componentDidMount(): void {

public render(): React.ReactElement<IRecentListItemsProps> {
    return (
      <div className={styles.helloWorld}>   
          this.state.loading && <Spinner label="Getting list data" size={SpinnerSize.medium} />
          this.state.listItems && this.state.listItems.length > 0 ? (
            <List items={this.state.listItems}
                  onRenderCell={this._onRenderCell} />
          ) : (
            !this.state.loading && (
              this.state.error ?
                <span className={styles.error}>{this.state.error}</span> :
                <span className={styles.nolistItems}>No documents found</span>

Reference - Office Fabric UI React Spinner component

  • Thanks. Any way I can do it as a directive (like in AngularJS) which will show it for any ajax operations? – Naveen Nov 22 '18 at 10:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.