Loading Service within injectable

You can call the Loading from within a page with something like::

 let loading = Loading.create({
                content: ''
            });
this.nav.present(loading);

But if I want to call the loading screen everytime I’m waiting for an http response that comes from any service, how can I separate the waters? I mean, i shouldn’t make all the services call the loading screen while they wait. That wouldn’t be decoupled.

Thanks in advance for the help.

One way would be to have a publicly exposed variable in a service that represents a count of currently open requests. Each time a request starts, you increment it. Each time a request returns (or errors), you decrement it. Then, in any relevant component, you could inject that service and use openNetworkRequests > 0 as a trigger for selectively displaying your loading spinner.