0

I have a React Application that is structured in the following way:

I have multiple pages - "PageA", "PageB". Each of these pages will render a main component - "PageAComponent", "PageBComponent". Within these main components, I have multiple small componennts that will trigger async operations using Redux Saga. Each of these components will store data into Redux-Store (or state). I want to be able to show a Loading Spinner over the entire page but I`m not sure how to detect when all the small components async calls are completed in order to know when to hide the loading spinner. Any ideas guys?

Irimie Andrei
  • 13
  • 2
  • If you are using saga I would listen for the actions of loading (or trigger the same action of loading on each load) , trigger another action on the content loaded and store on the redux store if there is any loading happening. You can pass a key for each loading instance and clear the key once the data is fetched – FabioCosta Oct 08 '18 at 14:50

1 Answers1

2

Keep a common reducer for spinner state, which contains a counter variable called pendingRequests:

// Spinner state
{
    pendingRequests: 0, 
}

Whenever you start loading data, increase the counter.

When data loading is done, whether it's success or failure, decrease the counter.

Show the spinner only when the counter is greater than 0.

vahissan
  • 2,322
  • 16
  • 26