javascript - Angular + Rxjs operator - show loader if api not completed within 5 sec show toastr and hide loader

Question

Actually we are trying to avoid blocking user to do other operation while file upload in progress.

how can i show toastr and hide the loader if api is not completed with in 5 sec using rxjs in angular.

uploadFile() {
  this.service.uploadFile(data)
    .pipe(
      //i am looking for operator which will wait 5 sec if and then hide the loader and show the toastr
    )
    .subscribe(() => {
      this.toastr.success('file uploaded successfully');
      this.loader.hide();
    })
}

question from:https://stackoverflow.com/questions/65844474/angular-rxjs-operator-show-loader-if-api-not-completed-within-5-sec-show-toa

Answer 1

you can create loading service like this:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class LoadingService {
  private isLoading = new Subject<boolean>();
  constructor() {}

  public start(isHideImmediately: boolean = false) {
    this.isLoading.next(true);
    if (isHideImmediately) {
      setTimeout(() => {
        this.complete()
      }, 5000);
    }
  }
  public complete() {
    this.isLoading.next(false);
  }

  getLoadingStatus(): Observable<boolean> {
    return this.isLoading.asObservable();
  }
}

and each time you call api you can start loading in start loading method by default after 5s loading is closed

your code:

uploadFile() {
  this.loadingService.start();
  this.service.uploadFile(data).subscribe(() => {
    this.toastr.success('file uploaded successfully');
    this.loadingService.complete();
  })
}