Показывать загрузчик до полной загрузки Angular 2+

Question

Я использую тему ng2-admin для угловых 2+. Я использую API для получения данных. Проблема, с которой я сталкиваюсь, заключается в том, что загрузчик скрывается, но данные все еще не загружены, поэтому на странице сначала отображается скелет страницы, а затем загружаются данные. это выглядит странно.

Я хочу, чтобы загрузчик показывал, пока все данные не будут отображены на странице.

Во-первых, я подумал, что проблема заключается в ответе API, но я вижу, что API завершен, это просто отображение данных в браузере, которое требует времени. Для идеи, вы можете увидеть в этом примере

this.loader = ture    
ApiCall.subscribe(response =>{
    logic();
    this.loader = false;
})

Загрузчик скрывается, но данные по-прежнему отображаются.

Спасибо в ожидании.

Answer 1

Можете ли вы попробовать так:

 this.loader = true;    
    ApiCall.subscribe(response =>{
        logic();
        setTimeout(() => { this.loader = false; })     
    })

Таким образом, он будет скрывать загрузчик только в следующем тике (цикл обнаружения изменений);

Answer 2

В вашем основном app.component попробуйте

this.router.events.subscribe((event) => {
    if ((event) instanceof RouteConfigLoadStart) {
   //   loader =true ;
    } else if ((event) instanceof RouteConfigLoadEnd) {
    // loader=false;
    }
}); 

Лучше написать общий сервис для загрузчика и использовать его, как,
this.loaderService.show(); this.loaderService.hide();

Answer 3

Насколько я знаю, два решения здесь.

1. Если у вас есть функция множественного обратного вызова и вы хотите получить все данные после завершения всего обратного вызова, вы используете Promise.all(iterable) Ссылка

2. Если вы хотите уведомить после просмотра загрузки, используйте ngAfterViewInit Ссылка

Редактировать Попробуйте использовать этот код

this.loader = true
ApiCall.subscribe(response => {
    logic();        
    setTimeout(() => {
       this.loader = false;
    }, 0);
});

Я думаю, что оба решения помогут вам.