I have an http interceptor that among other things turns loading overlay on and off as http requests are being processed. It accomplish this by activating a shared service which is subscribed to in app.component.ts which actually toggle css.
Problem is that as requests go in and out the overlay off action of one request can turn off the loading screen while another request is still going. I understand why it's happening but I can't really think of an approach to address that.
A simple way of doing this would be to just keep track of how many requests are pending using a counter.
When a request is performed you increase the counter, when a response of type HttpResponse arrives decrease the counter.
When the counter reaches 0, remove the overly, otherwise keep it until it does (reaches value 0).
Ps: you can take as example the full code of the linked interceptor.