I have an API call that downloads all Italian municipalities, which is nearly 8000. The problem is that the page loads the HTML, but I can't click anything until the API call is over.

ngAfterViewInit(){
    this.loadComuni();
}
loadComuni(){
   //Italian municipalities
   this.RegisterService.getMunicipalities().subscribe(
      obj=>{
        this.city=obj;
      },
      error=>{
        console.log("error", error);
   });
}


<div class="col-12 col-lg-4"">
 <select id="cbComNasc" class="form-control" formControlName="cbComNasc">
      <option *ngFor="let c of city" [ngValue]="c.citta">{{c.citta}}</option>
 </select>
</div>



//getMunicipalities
  public getMunicipalities():Observable<Comuni[]>{
    const httpOptions = {
      headers: new HttpHeaders({
        "Content-Type": "application/json; charset=UTF-8",
        'Accept':  'application/json'
      })
    }; 
    return this.HttpClient.get<Comuni[]>(environment.apiURL+"api/v1/gestionale/GetComuni",httpOptions)
  }

I also tried with the async pipe or with the promise but the problem is the same.