Angular Material Datatable loads slow

Question

I am having some troubles with my angular Material Application. I am using a datatable with a paginator. The data does not have to be sorted.

While loading the data I am showing a mat-spinner

<div *ngIf="schools !== undefined">
        <mat-spinner *ngIf="showSpinner" style="margin:0 auto;"></mat-spinner>
        <div *ngIf="!showSpinner">
            Keine Daten gefunden.
        </div>
</div>
<div *ngIf="schools !== undefined">
   <mat-table [dataSource]="dataSource"> 
      ...
   </mat-table>
   <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="20" showFirstLastButtons></mat-paginator>
</div>

In the normal case I am loading the data and the spinner stops spinning when the data is loaded and then the data is shown. This works perfectly fine.

But with a table, which has about 400 rows I am having this problem:

When the data is loaded sucessfully the spinner gets very very slow for about a second and the the data table is shown with all contents. (seperated by paginator)

It takes about 400 milliseconds to load the data from the api and about 3 milliseconds to parse it so that shouldnt be the problem.

I am loading the data like that:

ngOnInit() {
    setTimeout(() => {
      this.showSpinner = false;
    }, 5000);

    this.userID = this.authService.getCurrentUser.uid;
    this.loadData();
}

loadData() {
    this.apiService.getSchools().subscribe((schoolsData: any) => {
      this.schools = this.refParser.parse(schoolsData);
      this.dataSource = new MatTableDataSource(this.schools);

      this.cdr.detectChanges();
      this.dataSource.paginator = this.paginator;
    });
}

I already found a post on stackoverflow which should help me (Angular 6 MatTable Performance in 1000 rows.). But it did not help me :(

I tried it like that:

ngOnInit() {
    setTimeout(() => {
      this.showSpinner = false;
    }, 5000);

    this.userID = this.authService.getCurrentUser.uid;
    //this.loadData();
    this.dataSource = new MatTableDataSource();

    this.dataSource.paginator = this.paginator;
}

ngAfterViewInit(){
    setTimeout(() => {
      this.apiService.getSchools().subscribe((schoolsData: any) => {
        this.schools = this.refParser.parse(schoolsData);
        this.dataSource.data = this.schools;
        this.cdr.detectChanges();
      })
    })
}

It did not give me any performance boost. The only thing which happend was, the paginator did not work anymore.

Does anybody know what could help me to improve the performance of my application?

Thank you for your answers:)

Answer 1

I had face the same issue in past, Mat-Table handles Change Detection itself so it is not a concern of mat table, It is the Data Source which is being set in a wrong way.

If you pass all of your data in one go, it will render the whole data at first load only and will show the lag.

Since you are using paginator you should break your datasource into pageSize, so that only 20 elements will be rendered at load.

create a new instance of paginator : actualPaginator: MatPaginator;

@ViewChild(MatPaginator, {static: false})
  set paginator(value: MatPaginator) {
    this.actualPaginator = value;
  }

this.actualPaginator.pageIndex = Math.ceil(this.schools.length/this.actualPaginator.pageSize) - 1;

 let nextPageData: any[] = [];
 nextPageData = this.schools.slice((this.actualPaginator.pageSize * this.actualPaginator.pageIndex),(this.actualPaginator.pageSize * (this.actualPaginator.pageIndex + 1)));
 this.dataSource.data = nextPageData;

So distribute your this.schools data and load it per page size count, change the data source with next slot of this.schools data on next button click will resolve your issue.

You have to operate mat-paginator separately by creating new MatPaginator instance that is key solution.