Huge delay for *ngIf due to http.get

Issue

<mat-spinner *ngIf="loading === true"
             class="tableLoading"></mat-spinner>
<div *ngIf="loading === false">
...
</div>

So, for some reason, the spinner is taking like 5-8x longer to go away as it is compared to having no condition, yet the data read from my file in my .ts takes the same amount of time.

tableDataSource: MatTableDataSource<randomInterface> = new MatTableDataSource<randomInterface>();
loading: boolean = true;

constructor(private http: HttpClient) {}

ngOnInit() {
  this.http.get('assets/abc.json').subscribe((res) => {
    this.tableDataSource = new MatTableDataSource<randomInterface>(res as randomInterface[]);
    this.loading = false;
  })
}

Since the data is a 3MB~ .json file, I can understand why it would take 8sec~ to load, and without the *ngIf in the html it finishes normally, however when I return the loader to the *ngIf, all of a sudden the spinner stays there for 45sec+? I'm completely confused as to why this is happening.

Solution

If you do this method, the content will take time to render, instead go for a overlay type of solution, the html for that will be

<div>
    <mat-spinner [hidden]="!loading" class="tableLoading"></mat-spinner>
    ...
</div>

You need to style to overlay to be displayed over the grid, you can also add hidden to the grid with the reverse condition if necessary, if the grid needs to be hidden!

The advantage of this method is there is no re-rendering of any content and you show/hide the spinner whenever needed, also 3MB is huge, try a virtual scrolling/paging solution for fast user experience!

Answered By - Naren Murali