Как отображать панель загрузки только для запросов, занимающих больше времени, чем n - PullRequest
Новая
       9

Как отображать панель загрузки только для запросов, занимающих больше времени, чем n

0 голосов
/ 17 января 2019

У меня есть полоса загрузки, которая отображается при каждом HTTP-запросе. Это прекрасно работает для запросов, которые занимают более 300 мс или около того (например, вызовы API, которые извлекают много данных), но выглядят глупо, когда запрос короткий, полоса просто мигает, затем исчезает и довольно отвлекает.

Я пытаюсь понять, как я могу скрыть панель загрузки, если время, необходимое для возврата, не превышает n мс.

Для управления полосой загрузки у меня есть простой метод на AppCompoent

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  loading: boolean = true;

  constructor(private router: Router) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {

       // sleep here for n ms perhaps?

      this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
      routerEvent instanceof NavigationCancel ||
      routerEvent instanceof NavigationError) {
      this.loading = false;
    }
  }
}

Или это уже стандартный шаблон, который я полностью упустил, как справиться с этой ситуацией?

1 Ответ

0 голосов
/ 17 января 2019

Вы можете просто добавить новую переменную для учета состояния «завершена загрузка».

Вот решение: добавьте finishedLoading: boolean = true; к вашему классу. Тогда: 

checkRouterEvent(routerEvent: Event): void {
  if (routerEvent instanceof NavigationStart) {
    this.finishedLoading = false;
    this.loading = false;
    setTimeout(() => {
      if (!this.finishedLoading) {
        this.loading = true;
      }
    } , 300);
  }

  if (routerEvent instanceof NavigationEnd ||
    routerEvent instanceof NavigationCancel ||
    routerEvent instanceof NavigationError) {
    this.finishedLoading = true;
    this.loading = false;
  }
}
...