Show spinner only if there is no response from the server for more than 3 seconds?

Question

Angular

I use a table component from the angular material, I fill the table with data received from the backend. it is necessary to show the spinner if there is no response from the backend for more than 3 seconds, now the spinner is shown when there is no response yet, and as soon as it is received, we remove the spinner (this.isLoadingResults = false;)

public ngAfterViewInit(): void {
    this.keywordsDatabase = new KeywordsDatabase(this.keywordService);
    // If the user changes the sort order, reset back to the first page.
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
    this.keywordService.keywordGroupFilterObserver$.subscribe(res => this.filterValue = res);
    merge(
      this.sort.sortChange,
      this.paginator.page,
      this.keywordService.keywordGroupFilterSubject,
      this.keywordService.editKeywordObserver,
    )
      .pipe(
        startWith({}),
        switchMap(() => {
          this.isLoadingResults = true;
          return this.keywordsDatabase.getKeywordsList({
            groupType: KeywordGroupTypeNumber[KeywordGroupTypeString[this.filterValue]],
            sortBy: this.sort.active,
            sortDirection: this.mapEnumStringToNumber(this.sort.direction),
            skip: this.paginator.pageIndex,
          });
        }),
        map(data => {
          // Flip flag to show that loading has finished.
          this.isLoadingResults = false;
          this.isRateLimitReached = false;
          this.isDataTable = false;
          this.resultsLength = data.count;

          return data.items.map(keyword => {
            return {
              text: keyword.text,
              amount: keyword.amount,
              groupType: KeywordGroupTypeString[KeywordGroupTypeNumber[keyword.groupType]] || '',
              type: KeywordTypeString[KeywordTypeNumber[keyword.type]],
              id: keyword.id,
            };
          });
        }),
        catchError(() => {
          this.isLoadingResults = false;
          // Catch if the API has reached its rate limit. Return empty data.
          this.isRateLimitReached = true;
          return observableOf([]);
        }),
      ).subscribe(data => {
        if (data.length) {
          this.data = data;
        } else {
          this.isDataTable = true;
          this.data = [];
        }
    });
  }

export class KeywordsDatabase {
  constructor(private keywordService: KeywordService) {
  }

  public getKeywordsList(
    sortParameters: KeywordSort,
  ): Observable<KeywordCollectionModel> {
    return this.keywordService.getKeywordsList({
        groupType: sortParameters.groupType || '',
        sortBy: sortParameters.sortBy,
        sortDirection: sortParameters.sortDirection,
        skip: sortParameters.skip,
      },
    );
  }
}

this.isLoadingResults = false; responsible for when to show the spinner