title: Angular Material Datatable loads slow
body: <p>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.</p>
  
  <p>While loading the data I am showing a mat-spinner</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngIf="schools !== undefined"&gt;
          &lt;mat-spinner *ngIf="showSpinner" style="margin:0 auto;"&gt;&lt;/mat-spinner&gt;
          &lt;div *ngIf="!showSpinner"&gt;
              Keine Daten gefunden.
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;div *ngIf="schools !== undefined"&gt;
     &lt;mat-table [dataSource]="dataSource"&gt; 
        ...
     &lt;/mat-table&gt;
     &lt;mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="20" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>But with a table, which has about 400 rows I am having this problem:</p>
  
  <p>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)</p>
  
  <p>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.</p>
  
  <p>I am loading the data like that:</p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
      setTimeout(() =&gt; {
        this.showSpinner = false;
      }, 5000);
  
      this.userID = this.authService.getCurrentUser.uid;
      this.loadData();
  }
  
  loadData() {
      this.apiService.getSchools().subscribe((schoolsData: any) =&gt; {
        this.schools = this.refParser.parse(schoolsData);
        this.dataSource = new MatTableDataSource(this.schools);
  
        this.cdr.detectChanges();
        this.dataSource.paginator = this.paginator;
      });
  }
  </code></pre>
  
  <p>I already found a post on stackoverflow which should help me (<a href="https://stackoverflow.com/questions/50283659/angular-6-mattable-performance-in-1000-rows">Angular 6 MatTable Performance in 1000 rows.</a>).
  But it did not help me :(</p>
  
  <p>I tried it like that:</p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
      setTimeout(() =&gt; {
        this.showSpinner = false;
      }, 5000);
  
      this.userID = this.authService.getCurrentUser.uid;
      //this.loadData();
      this.dataSource = new MatTableDataSource();
  
      this.dataSource.paginator = this.paginator;
  }
  
  ngAfterViewInit(){
      setTimeout(() =&gt; {
        this.apiService.getSchools().subscribe((schoolsData: any) =&gt; {
          this.schools = this.refParser.parse(schoolsData);
          this.dataSource.data = this.schools;
          this.cdr.detectChanges();
        })
      })
  }
  </code></pre>
  
  <p>It did not give me any performance boost. The only thing which happend was, the paginator did not work anymore. </p>
  
  <p>Does anybody know what could help me to improve the performance of my application?</p>
  
  <p>Thank you for your answers:)</p>