How to do somethinng before interceptor handles response angular 16

Question

I have an interceptor like this:

export class LoadingInterceptor implements HttpInterceptor {

  private totalRequests = 0;

  constructor(
    private loadingService: LoaderService
  ) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    this.totalRequests++;
    this.loadingService.setLoading(true);
    return next.handle(request).pipe(
      finalize(() => {
        this.totalRequests--;
        if (this.totalRequests == 0) {
          this.loadingService.setLoading(false);
        }
      })
    );
  }
}

the setLoading method sets the visibility of a loader inside my app. I also have an http call like this:

this.messageService.AddMessage({...})
.subscribe(res => {
               if(res.outcome === "success") {
                showOkMessage();
               } else {
                showErrorMessage();
               }
           });

My problem is that the ok message (or the error message) gets shown while the loader is still visible. This is the loader.

<div *ngIf="this.loader.getLoading()" class="loader-container">
  <div class="loader"></div>
</div>

I want to show the message (ok/error) after the loader is hidden. How should i modify the interceptor?

I have an interceptor like this:

export class LoadingInterceptor implements HttpInterceptor {

  private totalRequests = 0;

  constructor(
    private loadingService: LoaderService
  ) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    this.totalRequests++;
    this.loadingService.setLoading(true);
    return next.handle(request).pipe(
      finalize(() => {
        this.totalRequests--;
        if (this.totalRequests == 0) {
          this.loadingService.setLoading(false);
        }
      })
    );
  }
}

the setLoading method sets the visibility of a loader inside my app. I also have an http call like this:

this.messageService.AddMessage({...})
.subscribe(res => {
               if(res.outcome === "success") {
                showOkMessage();
               } else {
                showErrorMessage();
               }
           });

My problem is that the ok message (or the error message) gets shown while the loader is still visible. This is the loader.

<div *ngIf="this.loader.getLoading()" class="loader-container">
  <div class="loader"></div>
</div>

I want to show the message (ok/error) after the loader is hidden. How should i modify the interceptor?