change detection ;application.tick is recursively called ? why

Question

i have a parent component A and child component b and service c for loading the loading pop up service in success and failure.

Have a button called as newchanges in B child component and b component emit the value and call the function in a component and there have a service call , in the service call.

while click on the child component b newchanges button continiously, i am getting below error.application.tick is recursively called .

if i am not using application.tick , the loading diolog is not close, therefore i have used in the application ref in service. it is a global service for all the modules.

can any one help to resolve:

this is the loader service used in service call sucess and failure for close the loader.

exitLoader = ():void => {

        setTimeout(() => {
          console.log('tick1');
          this.matLoader.close();

          this.applicationRef.tick();
        }, 50);

}

i need to close the loader that is a service which is used in another service success and failure , when i am not using application ref it is not closing so i have used this after this i am click continiously call the service get an mentioned error.

and i have tried another option using zone , loader not close:

 // setTimeout(() => {
      //   this.zone.runOutsideAngular(() => {
      //     this.matLoader.close();
      //   });
      // }, 100);