Показывать анимацию загрузки при получении данных (Angular 10)

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

constructor(private repoService: RepoService) {
    this.getAllDocuments();
}

ngOnInit() {
  // stuff that really need @Input data to be filled
}

ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
}

getAllDocuments() {
    this.spinner.show();
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe((res: Document[]) => {
      this.dataSource.data = res;
      this.spinner.hide();
    },
    error => {
      this.spinner.hide();
      console.error('error while retrieving documents', error);
      // handle error
    })
}

Вы делаете это неправильно, вы должны вызвать счетчик, чтобы показать, когда выполняется вызов API, и скрыть его, когда данные извлекаются.

Лучший способ - вызвать его в конструкторе, поскольку ngOnInit вызывается после завершения создания DOM компонента, внедрения всех необходимых зависимостей через конструктор и обработки входных привязок.

constructor() {
    this.getAllDocuments();
}


ngOnInit() {
    //this.getAllDocuments();
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  async getAllDocuments() {
    this.spinner.show();
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe((res: Document[]) => {
      this.dataSource.data = res;
    }, (err) => {
        //handle the errors
         console.log(err);
    }, () => {
        this.spinner.hide();
    });
  }

Загрузка счетчика — это хороший метод взаимодействия с пользователем, но сколько счетчиков вам нужно загрузить, чтобы удовлетворить пользователя? Вероятно, в зависимости от размера приложения. Поскольку вам нужно показывать счетчик, когда данные извлекаются, использование глобального счетчика было бы гораздо лучшим способом. С глобальным счетчиком всякий раз, когда данные извлекаются, счетчик будет отображаться. Ниже приведена хорошая реализация перехватчика, показывающая счетчик с использованием перехватчика. показать счетчик

Вы можете использовать приведенный ниже код:

getAllDocuments() {
 this.spinner.show(); // SHOW WHEN DATA IS LOADING
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe(res => {
      this.dataSource.data = res as Document[];
     this.spinner.hide();  //  HIDE WHEN DATA IS LOADED
    })
  }

Вы можете показывать и скрывать счетчик в одной и той же функции, а не создавать для этого новую функцию.

async getAllDocuments() {
    this.spinner.show();
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe(res => {
          this.dataSource.data = res as Document[];
          this.spinner.hide();
    });
    
}