title: How to handle a single loading indicator for the whole application using React and Redux?
body: <p>My web application sometimes need to polling back-end for fetching data. These actions usually take about 6 or 7 seconds. And during these polling, I want users are not allowed to interact on the UI.</p>
  
  <p>What I have done is, in each component state, there are some flags such as <code>loading</code>, <code>success</code>, <code>error</code> for showing loading status on component level. But users still can interact with other components => this make handling edge cases are very difficult. So, I want when the app is in polling state, user cannot interact on the other component for a predictable and consistent flow.</p>
  
  <p>What I expect is, a modal popup appears whenever there is a polling, then users only see that modal popup with some loading status and cannot interact on the UI.</p>
  
  <p>Can you guys suggest me a direction for this? Using Redux (It's better if I can re-use modal pop-up from Antd <a href="https://ant.design/components/modal/#header" rel="nofollow noreferrer">https://ant.design/components/modal/#header</a>).</p>