title: React.js: Use overlay spinner on index.js when calling API
body: <p>I'm trying to put a spinner on my app whenever there is an ongoing API call</p>
  
  <p>I had success in tracking the API call by using a library called <code>react-promise-tracker</code></p>
  
  <p>Usage below:</p>
  
  <p>ProfileMaintenancePage.js</p>
  
  <pre><code>import { trackPromise } from 'react-promise-tracker';
  
    const saveProfile2 = () =&gt; {
      let lastModifier = "test"
      let status = "NEW"
      let createdBy = "test"
      const mapSelectedModules = selectedModules.map((id)=&gt;({id:id}))
      const mapSelectedActions = selectedActions.map((id)=&gt;({id:id}))
      trackPromise(
        ProfileMaintenanceService.saveProfile(selectedRecords[0], profileName, lastModifier, status, createdBy, mapSelectedModules, mapSelectedActions)
        .then((response) =&gt; {
          if(response.data.success === "Success"){
            store.addNotification({
              ...notification,
              message: "Success! Profile has been saved."
            })
          }
        }))
    }
  </code></pre>
  
  <p>With this, I can call <code>usePromiseTracker</code> anywhere on the app to check the promise (axios request) </p>
  
  <p>As seen below:</p>
  
  <p>index.js</p>
  
  <pre><code>import React, { Component, useState } from 'react';
  import { render } from 'react-dom';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import '@fortawesome/fontawesome-free/css/all.min.css';
  import 'bootstrap-css-only/css/bootstrap.min.css';
  import 'mdbreact/dist/css/mdb.css';
  import './index.css';
  import { usePromiseTracker } from "react-promise-tracker";
  import LoadingOverlay from 'react-loading-overlay';
  
  const LoadingIndicator = props =&gt; {
      const [isActive, setIsActive] = useState(false)
      const { promiseInProgress } = usePromiseTracker();
      return (
          promiseInProgress &amp;&amp; 
              &lt;LoadingOverlay
                  active={isActive}
                  spinner
                  text='Loading your content...'
              &gt;
              &lt;p&gt;Some content or children or something.&lt;/p&gt;
               &lt;/LoadingOverlay&gt;
      );  
  }
  
  render(
      &lt;div&gt;
        &lt;LoadingIndicator/&gt;
        &lt;App /&gt;
      &lt;/div&gt;,
  document.getElementById('root'));
  
  registerServiceWorker();
  </code></pre>
  
  <p>My current dilemma are:
  1. How can I set <code>isActive</code> state to true when the promise is in progress?
  2. How can I show <code>&lt;App/&gt;</code> normally whenever there is no API call? And trigger the overlay when there is one.</p>
  
  <p>TIA</p>
  
  <p>--EDIT--</p>
  
  <p>Answer:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
  import AuthenticatedRoute from './components/AuthenticatedRoute';
  import LoginComponent from './components/LoginComponent';
  import LogoutComponent from './components/LogoutComponent';
  import AuthenticatedPage from './components/pages/AuthenticatedPage';
  import ReactNotification from 'react-notifications-component'
  import 'react-notifications-component/dist/theme.css'
  import { usePromiseTracker } from "react-promise-tracker";
  import LoadingOverlay from 'react-loading-overlay';
  
  function App() {
    const { promiseInProgress } = usePromiseTracker();
  
    return (
        &lt;LoadingOverlay
          active={promiseInProgress}
          spinner
          text=''
        &gt;
        &lt;div&gt;
        &lt;ReactNotification /&gt;
        &lt;Router&gt;
          &lt;Switch&gt; 
            &lt;Route path="/" exact component={LoginComponent} /&gt;
            &lt;Route path="/login" exact component={LoginComponent} /&gt;
            &lt;AuthenticatedRoute path="/logout" exact component={LogoutComponent} /&gt;
            &lt;AuthenticatedRoute path="/dashboard" exact component={AuthenticatedPage} /&gt;
  
            {/* Transfers */}
            &lt;AuthenticatedRoute path="/inbox" exact component={AuthenticatedPage} /&gt;
            &lt;AuthenticatedRoute path="/sent" exact component={AuthenticatedPage} /&gt;
            &lt;AuthenticatedRoute path="/acknowledged" exact component={AuthenticatedPage} /&gt;
            &lt;AuthenticatedRoute path="/bcpmode" exact component={AuthenticatedPage} /&gt;
  
            {/* Proof List */}
            &lt;AuthenticatedRoute path="/proofweb" exact component={AuthenticatedPage} /&gt;
            &lt;AuthenticatedRoute path="/proofothers" exact component={AuthenticatedPage} /&gt;
  
            &lt;AuthenticatedRoute path="/misc" exact component={AuthenticatedPage} /&gt;
  
            {/* RPS */}
            &lt;AuthenticatedRoute path="/clientmaintenance" exact component={AuthenticatedPage} /&gt;
            &lt;AuthenticatedRoute path="/processsftp" exact component={AuthenticatedPage} /&gt;
            &lt;AuthenticatedRoute path="/processpesonet" exact component={AuthenticatedPage} /&gt;
            &lt;AuthenticatedRoute path="/overrideenrollment" exact component={AuthenticatedPage} /&gt;
  
            &lt;AuthenticatedRoute path="/messageconverter" exact component={AuthenticatedPage} /&gt;
  
            {/* Administrator */}
            &lt;AuthenticatedRoute path="/usermaintenance" exact component={AuthenticatedPage} /&gt;
            &lt;AuthenticatedRoute path="/profilemaintenance" exact component={AuthenticatedPage} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
      &lt;/LoadingOverlay&gt;
  
    );
  }
  
  export default App
  </code></pre>