In angular 13, how can I get all API requests that live on different components?

Note that this example is just a simple illustration of how you might use the forkJoin operator to accomplish this task. Your specific implementation may vary depending on your particular needs and requirements.

One way to wait for all API requests to finish before stopping the global loading spinner is to use the RxJS forkJoin operator. This operator allows you to combine multiple Observables (such as those returned by API calls) and subscribe to them as a single Observable. You can use this operator to wait for your API requests to complete and then hide the loading spinner.

Here is an example of how you might use the forkJoin operator to accomplish this:

import { forkJoin } from 'rxjs';

// Assume that `api1$` and `api2$` are Observables that represent API requests.
const allApiRequests$ = forkJoin([api1$, api2$]);

allApiRequests$.subscribe(() => {
  // Hide the loading spinner here, after all API requests have completed.
});

This code creates a new Observable, allApiRequests$, which represents the combination of the api1$ and api2$ Observables. When you subscribe to this Observable, it will emit a value only after both of the original Observables have emitted their final values. You can use this to know when all your API requests have been completed and hide the loading spinner at that point.