Show spinner on grid until the data is loaded

[Amarender Tangella]

I am trying to show the spinner on the grid. By default, the grid spinner is hidden before the data is loaded on the grid. So, I am using an Angular Directive to create a custom spinner for the grid using the createSpinner, showSpinner, and hideSpinner by hiding the grid default spinner and displaying the custom spinner onLoad event as follows:

private onLoad(eventArgs: any): void {

const defaultSpinner =

this.el.nativeElement.querySelector(".e-spinner-pane");

this.renderer.setStyle(defaultSpinner, "display", "none");

this.renderer

.selectRootElement(this.el.nativeElement, true)

.insertAdjacentHTML("beforeend", `<div class="custom-spinner"></div>`);

this.createSpinner();

}

public createSpinner(): void {

const customSpinner =

this.el.nativeElement.querySelector(".custom-spinner");

createSpinner({ target: customSpinner, width: "30px" });

this.showSpinner();

}

public hideSpinner(): void {

const customSpinner =

this.el.nativeElement.querySelector(".custom-spinner");

hideSpinner(customSpinner);

}

public showSpinner(): void {

const customSpinner =

this.el.nativeElement.querySelector(".custom-spinner");

showSpinner(customSpinner);

}

let requestType = [

"paging",

"refresh",

"sorting",

"selection",

"filtering",

"searching",

"rowdraganddrop",

"reorder",

"grouping",

"ungrouping",

"batchsave",

"virtualscroll",

"print",

"beginEdit",

"save",

"delete",

"cancel",

"add",

"filterBeforeOpen",

"filterchoicerequest",

"filterAfterOpen",

"filterSearchBegin",

"columnstate",

"infiniteScroll",

];

public onActionBegin(eventArgs: any): void {

if (

this.requestType.indexOf(eventArgs.requestType) !== -1

) {

this.showSpinner();

}

}

public onActionComplete(eventArgs: any): void {

if (

this.requestType.indexOf(eventArgs.requestType) !== -1

) {

this.hideSpinner();

}

}

I am calling the methods on every requestTypes of actionBegin() and actionComplete() events. I am showing the spinner until the grid.currentViewData.length > 0 and hiding it onDataBound() event. But, sometimes the dataSource doesn't have any data. In those scenarios, the custom spinner doesn't hide and keeps spinning. How do I show the spinner until the data is viewed on the Grid?

[Hemanthkumar S]

Hi Amarender,

Query: Custom spinner doesn't hide and keeps spinning

From your shared information identified that you are trying to hide the custom spinner when the grid current view data length is less than ‘0’. Based on your update we prepared a sample and recommend that to remove the condition for hiding the spinner when the grid current view data length is greater than ‘0’ in the dataBound event to achieve your goal.

Please refer to the below code example, and sample for more information.

[app.component.ts]

  private dataBound(eventArgs: any): void {

    this.hideSpinner();

  }

 

Sample Link: https://stackblitz.com/edit/angular-2jjkjc?file=src%2Fapp.component.ts,src%2Fapp.component.html

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Hemanth Kumar S

[Amarender Tangella]

Ok, maybe I missed some details. In your example, you are giving me an empty dataSource. In my case the dataSource is Observable and the data is asynchronous. So, when the grid is loaded the spinner is shown as I am showing it on the load() ​event. I am hiding it on the dataBound() ​ event when the grid.currentViewData.length is greater than 0. If there is data, this works perfectly fine. If there is no data, as it is observable and the spinner is hidden on the currentViewData length>0, the spinner is not hidden. I want to know if there is a way to show the spinner for asynchronous data. The default grid spinner hides after 2-3 seconds and doesn't show until the data is shown on the grid. I have asked this question months ago, and you guys gave me the grid.currentViewData.length solution(https://www.syncfusion.com/forums/174392/show-spinner-for-async-data-on-grids ). But, now I am facing the issue as the spinner is not hidden until there is no data on the grid. If my dataSource is empty, the spinner keeps spinning. 

Here is a reproducible of what's happening 

https://stackblitz.com/edit/angular-2jjkjc-jjyn6h?file=src/app.component.ts

[Hemanthkumar S]

Hi Amarender Tangella,

Query: Custom spinner doesn't hide and keeps spinning

In Angular, Observables are used extensively for asynchronous programming, and they provide a subscribe() method. The subscribe() method is used to listen to the Observable and retrieve data emitted by it.

Subscribe to the Observable, providing an object with three functions:

• next: called when the Observable emits data
• error: called when an error occurs
• complete: called when the Observable completes

Based on your update we prepared a sample and recommend that to set the flag in the next function for determining whether the data is emitted by the Observables.

For more information, please refer to the below code example and sample.

[app.component.ts]

  public dataPresent: boolean = false;

 

  ngOnInit(): void {

    // this.dataBehaviorSubject.next([

    //   {

    //     OrderID: 1,

    //     CustomerName: 'Wilford Metz',

    //     OrderDate: new Date(2022, 5, 27, 13, 30, 0, 0),

    //   },

    // ]);

    this.data$.subscribe(

      (value) => {

        console.log('Value emitted:', value);

        // handle the emitted value here

        if (value.length) {

          this.dataPresent = true;

        }

      },

      (error) => {

        console.error('Error occurred:', error);

        // handle the error here

      },

      () => {

        console.log('Observable completed');

        // handle the completion event here

      }

    );

  }

 

  private dataBound(eventArgs: any): void {

    if (this.el.currentViewData.length > 0 || !this.dataPresent) {

      this.hideSpinner();

    }

  }

 

 

Sample Link: https://stackblitz.com/edit/angular-2jjkjc-vwcimb?file=src%2Fapp.component.ts

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Hemanth Kumar S