服务呼叫角度为6时页面卡住了

Question

我正在ngOnIt()呼叫服务。当我路由页面时，页面卡住直到数据加载完成，因为从WebAPI加载数据需要5到10秒。我无法单击任何其他按钮或文本框。

html

<ngx-slick class="row-2 vSlides" #slickModal="slick-modal" [config]="slideConfig">
              <div ngxSlickItem *ngFor="let noti of objNotifications" class="vSlide row-2 slide">
                <h4><a href="#" [innerHTML]="noti.Title"></a></h4>
                <ul>
                  <li><i class="fa fa-clock-o"></i> <span [innerHTML]="noti.DDate"></span></li>
                  <li><i class="fa fa-university"></i> <span [innerHTML]="noti.ParentDeptName"></span></li>
                </ul>
              </div>
              <div class="skeleton-loader" id="skeleton-loader1">
                <img src="../../../assets/img/skeleton-loader.gif">
                <img src="../../../assets/img/skeleton-loader.gif" style="margin-top: 10px;">
              </div>
            </ngx-slick>

component.ts

objNotifications: DepartmentsNotificationsModel[];
constuctor(private departmentService: DepartmentsService){}
ngOnInit(){
this.notificationsService();
}
 notificationsService() {
    this.departmentService.GetAllNotifications().subscribe(res => {
      this.objNotifications = res as DepartmentsNotificationsModel[];
      $('#skeleton-loader1').hide();

    });
  }

service.ts

 readonly baseUri = "url";
    constructor(private http: HttpClient) { }
    objNotifications: DepartmentsNotificationsModel[];
    GetAllNotifications() {
        return this.http.get(this.baseUri + "urlParameters").map(res => this.objNotifications = res as DepartmentsNotificationsModel[]);
  }