Http interceptor not working on multi-item filter

Question

I'm using interceptor to display a progress bar, everything work's if I either refresh the page or just use single item filter, but I also have a modal that has the ability to filter by couple items, and even if I select only 1 thing from that filter(etc price) the progress bar gets displayed, interceptors logs true that it has been started but i never get false logged in console, so it just spins until i go back to the main page

UPDATE: seems like the problem is that loadings.size stays at 1 even tho call is ended.

INTERCEPTOR TS

constructor(private loader:LoadingService) {}

  intercept(
    request: HttpRequest<unknown>,
    next: HttpHandler
  ): Observable<HttpEvent<unknown>> {
    this.loader.handle(request.url, true);
    return next
      .handle(request)
      .pipe(
        catchError((error: any) => {
          console.log(error);
          this.loader.handle(error.url, true);
          return error;
        })
      )
      .pipe(
        map((evt: any) => {
          if (evt instanceof HttpResponse) {
            this.loader.handle(evt.url!, false);
          }
          return evt;
        })
      );
  }

loading Service

loadingEmitter: Subject<boolean> = new Subject<boolean>();
  loadings: Map<string, boolean> = new Map<string, boolean>();

  constructor() {}
  
  handle(url: string, loadingStatus: boolean): void {
    if (loadingStatus) {
      this.loadings.set(url, loadingStatus);
      this.loadingEmitter.next(true);
    } else if (!loadingStatus && this.loadings.has(url)) {
      this.loadings.delete(url);
    }

    if (this.loadings.size == 0) {
      this.loadingEmitter.next(false);
    }
  }

view page where i check query params and do filtering

cards!: any[];
  constructor( private route:ActivatedRoute,private filterS:FilterServiceService) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe((params) => {
      if (params['Id']) {
        this.filterS.filterByCategoryId(params['Id']).subscribe((response:any) => this.cards = response);
      } else {
        this.filterS.getByAllCategory(params).subscribe((response:any) => this.cards = response)
      }
    });
  }

tried to move the html/ts code in other components but no change

Answer 1

FIXED THE ISSUE : The solution was to change this line of code:

    this.loader.handle(request.url, true); => this.loader.handle(request.urlWithParams, true)

on the multi-filter I use HTTP params to send requests, I'm guessing that was causing the issue,