title: How to add a loading indicator on every Relay.js network request
body: <p>I'm currently building a Relay/React web app. It's been amazingly simple with one exception. I've not been able to figure out how I can get a global notification when any of my components are making network requests. I'm hopping to add a spinner to the top of my app when ever there's network activity, because some of my mutations take a long time to load. </p>
  
  <p>This was my attempt at solving this problem, but it only works on new route page loads. </p>
  
  <pre><code>function renderer(info)
  {
      let {props, error, element} = info;
      if (error) {
          return (&lt;ServerError errors={error}/&gt;);
      } else {
          if (props) {
              return React.cloneElement(element, props);
          } else {
              return (&lt;Loading /&gt;);
          }
      }
  }
  
  
  ReactDOM.render(
      &lt;Router
          history={browserHistory}
          render={applyRouterMiddleware(useRelay)}
          environment={Relay.Store}
      &gt;
          &lt;Route
              path="/"
              queries={ViewerQuery}
              component={App}
          &gt;
              &lt;IndexRoute
                  queries={ViewerQuery}
                  component={Libraries}
                  render={renderer}
              /&gt;
          &lt;Route path="*" component={Error}/&gt;
  
      &lt;/Route&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>Ideally I could get some callback that I can pass to my App component, which renders all my pages headers and footers. Any help with this would be greatly appreciated. I've been all over the internet for a while trying to find a good solution to this. </p>