How to handle a mid-large result from http request on leaflet map without freezing

Question

I am creating a dashboard with Angular. i'm making a call to Server PostGIS that contains a spatial data to visualize into my leaflet map. When i load my page, everything work fine.

The steps are:

• Define a Service that make the request to the server;

getDoors(): Observable<any> {
    return this.http
      .get(this._endpoint+'/api/doors')
      .pipe(
        tap(_ => console.log('fetched doors')),
        catchError(this.handleError('getDoors')),
        map(this.extractData)
      );
  }

• into my component I call:

this.serverRequest.getDoors().subscribe(res => this.doors = res);

• to show the results in my template i use [1]

<div *ngIf="doors">        
      <app-map [data]="doors"></app-map>        
</div>

..other template component ..

I don't unsubscribe considering we are talking about http calls [2].

As anticipated everything works fine. But considering the large number of result of my query (~5000 results) before showing them on the map pass a few seconds and the page and the other components freezing.

What would I get? I would like my map and my other components to be created and when available, add data.

Reference

[1] https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

[2] Is it necessary to unsubscribe from observables created by Http methods?