Adding the logic to optimize the show/hide behavior based on the ongoing calls in app component.

app.component.js

ngAfterViewInit(){
    let loader_control = this.global_utilities.getGlobalData('loading_animation_control');
    this.loading_animation_control_sub = loader_control.subscribe(
      (to_show: any) => {
        // Show if the loader is not being shown already
        if(to_show && !this.is_loader_showing){
          this.is_loader_showing = true;
        }
        // Hide if the loader is being shown and there is no ongoing service call in next few seconds
        if(!to_show && this.is_loader_showing){
          let ongoing_call_check_interval = setInterval(
            ()=>{
              let ongoing_call_count = this.global_utilities.getGlobalData('ongoing_request_count');
              if(ongoing_call_count == 0){
                this.is_loader_showing = false;
                clearInterval(ongoing_call_check_interval);
              }
            }, 1000
          );
        }
      }
    );
  }