Implementing a global spinner with NgRx/SignalState

In the Multi-step responsive forms section of Chapter 8, Recipes – Reusability, Forms, and Caching, and the Data tables with pagination section earlier in this chapter, I discussed the differences between localized spinners and global ones. A global spinner is the ultimate 80-20 solution to paper over UX issues stemming from UI elements not being ready for interaction while data loads. However, this will cause excessive full-screen interruptions in large applications with multiple on-screen components or background service workers loading data. In that case, most components will require local spinners instead.

With that in mind, let’s go after the 80-20 solution. We can use an HttpInterceptor to detect when an API call is made within the application. This allows us to show or hide a global spinner. However, if multiple calls are made concurrently, we must keep track of this, otherwise the global spinner may behave...