title: React loading screen on all routes?
body: <p>I understand how I can get a spinner screen with <code>state</code> and <code>componentDidMount()</code> but how would I go about creating a loading screen in between on all routes without having to write <code>componentDidMount()</code> in every component?</p>
  
  <p>My app.js file</p>
  
  <pre><code>class App extends Component {
  
    constructor(props) {
      super(props);
      this.child = React.createRef();
    }
  
    onWaypoint = () =&gt; {
      this.child.current.navChangeHandler();
    }
  
    render() {
  
      let routes = (
        &lt;Switch&gt;    
          &lt;Route exact path="/projects" component={Projects} /&gt;
          &lt;Route exact path="/about" component={About} /&gt;
          &lt;Route exact path="/gallery" component={Gallery} /&gt;
          &lt;Route exact path="/" component={Home} /&gt;
          &lt;Redirect exact to="/" /&gt;
        &lt;/Switch&gt;
      )
  
      return (
        &lt;BrowserRouter&gt;
          &lt;div className="App" styleName="main-wrapper"&gt;
            &lt;Layout&gt;
                {routes}
                &lt;Navigation ref={this.child} /&gt;
            &lt;/Layout&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
  
      );
    }
  }
  </code></pre>
  
  <p>I want to be able to see a spinner in between these routes.</p>