1 files changed, 19 insertions, 9 deletions
diff --git a/components/Header.js b/components/Header.js
index 60d0621..cc4cca7 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,12 +1,20 @@
-import { Component } from 'react'
-import { graphql, compose } from 'react-apollo'
+import { Component } from 'react';
+import { graphql, compose } from 'react-apollo';
 import { CURRENT_USER_QUERY } from '../queries';
 import Cart from './Cart';
 import Login from './LoginAuth0';
 import Search from './Search';
+import NProgress from 'nprogress';
+import Router from 'next/router';
 
-class Header extends Component {
+Router.onRouteChangeStart = url => {
+  console.log(`Loading: ${url}`);
+  NProgress.start();
+};
+Router.onRouteChangeComplete = () => NProgress.done();
+Router.onRouteChangeError = () => NProgress.done();
 
+class Header extends Component {
   componentDidMount() {
     // This fetches the new data, but doesn't populate the user via props
     // this.props.currentUserQuery.refetch();
@@ -19,14 +27,16 @@ class Header extends Component {
     const { email = '' } = user;
     return (
       <div>
-        <p>Signed in as <strong>{email}</strong></p>
-        <Login></Login>
-        <Cart></Cart>
-        <Search></Search>
+        <p>
+          Signed in as <strong>{email}</strong>
+        </p>
+        <Login />
+        <Cart />
+        <Search />
       </div>
-    )
+    );
   }
 }
 
 const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
-export default compose(userEnhancer)(Header)
+export default compose(userEnhancer)(Header);