Как отображать разные блесны на каждом вызове API

Question

В моем коде я вызываю два API на странице.Есть две кнопки: «Получить данные» и «Секунды» - «Данные пользователя».Я создал одну службу загрузчика HttpInterceptor в этой службе, которую я называю службой загрузчика.Я также создал один LoaderComponent в этом компоненте, я добавил HTML разметку счетчика.Я хочу отображать разные загрузчики для каждого запроса, и в настоящее время он показывает один загрузчик для обоих запросов. Вот мой код

    import { Injectable } from "@angular/core";
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
  HttpEventType
} from "@angular/common/http";
import { Observable } from "rxjs";
import { finalize } from "rxjs/operators";
import { LoaderService } from "./loader.service";
import { HttpInterceptorHandler } from "@angular/common/http/src/interceptor";

@Injectable({
  providedIn: "root"
})
export class InterceptLoaderService implements HttpInterceptor {
  constructor(public loaderService: LoaderService) {}
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    this.loaderService.show();
    return next.handle(req).pipe(
      finalize(() => {
        this.loaderService.hide();
      })
    );
  }
}

loader.service.ts

import { Injectable } from "@angular/core";
import { Subject } from "rxjs";
@Injectable({
   providedIn: "root"
})
export class LoaderService {
constructor() {}

isLoadin = new Subject<boolean>();

show() {
 this.isLoadin.next(true);
}

hide() {
this.isLoadin.next(false);
}
}

loader.component.html

    <div *ngIf="isLoading | async" class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

app.component.ts

import {
Component,
OnInit,
OnChanges,
DoCheck,
AfterContentInit,
AfterContentChecked,
AfterViewInit,
AfterViewChecked,
OnDestroy
} from "@angular/core";
import { AppServiceService } from "./app-service.service";
import { take, map } from "rxjs/operators";
declare var $: any;

export interface Post {
userId: Number;
id: Number;
title: String;
body: String;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
constructor(private appService: AppServiceService) {}
dataUser: Post[];
datavalue;
ngOnInit() {}


getAllData() {    
this.appService.getall().subscribe(data => {      
  console.log("THIS IS DATA USER", data);
});
}

getData() {    
this.appService
  .getallPost()
  .pipe(take(10))
  .subscribe(
    data => {

      console.log("DATA POST", data);
      this.datavalue = data;
    },
    error => {

    }
  );
  }
  }

app.component.html

     <div class="card p-2">
      <p>{{ userName }}</p>
         </div>
       <div class="container-fluid">
        <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
           <button class="btn btn-primary" (click)="getData()">
         Get Data
          </button>
        <button class="btn btn-warning ml-2" (click)="getAllData()">
            User Data
              </button>
         <app-loader></app-loader>

        <h6>Data</h6>
        <ul>
          <li
          class="alert alert-warning"
          *ngFor="let userdata of datavalue; let i = index"
        >
            {{ userdata.body }} {{ i }}
          </li>
           </ul>
       </div>
          <div class="col-lg-6 col-md-6 col-sm-12"></div>
        </div>
      </div>
     <div id="myModal" class="modal fade" role="dialog">
       <div class="modal-dialog">
        <!-- Modal content-->
       <div class="modal-content">
           <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          &times;
        </button>
        <h4 class="modal-title">Error Modal</h4>
      </div>
      <div class="modal-body">
        <p>Status 404 Url Not Found</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
      </button>
      </div>
      </div>
      </div>
      </div>
      <div id="myModalLoading" class="modal fade" role="dialog">
      <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body">
      <p>Loading Please wait</p>
      </div>
      </div>
     </div>
     </div>