Add loading indicator during page load

Add visual feedback during page load

Author: w3bdesign

package-lock.json

@@ -24,6 +24,7 @@
     "graphql-request": "^2.0.0",
     "graphql-tag": "^2.10.3",
     "next": "^9.4.4",
+    "nprogress": "^0.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-instantsearch-dom": "^6.6.0",

package.json

@@ -1,15 +1,22 @@
 import { ApolloProvider } from '@apollo/react-hooks';
-
 import { AppProvider } from 'utils/context/AppContext';
 
+import Router from 'next/router';
+import NProgress from 'nprogress';
+
 import Header from '../components/Header/Header.component';
 import Footer from '../components/Footer/Footer.component';
 
 import '../styles/index.css';
 import '../styles/algolia.min.css';
+import 'nprogress/nprogress.css';
 
 import client from '../utils/apollo/ApolloClient';
 
+Router.events.on('routeChangeStart', () => NProgress.start());
+Router.events.on('routeChangeComplete', () => NProgress.done());
+Router.events.on('routeChangeError', () => NProgress.done());
+
 const App = ({ Component, pageProps }) => {
   return (
     <>

pages/_app.js

@@ -12,7 +12,7 @@ export const INITIAL_STATE = {
   country: 'NO',
   postcode: '1525',
   phone: '90561212',
-  email: 'test@gmail.com',
+  email: 'test@testemailgmail.com',
   company: 'Tech',
   createAccount: false,
   orderNotes: '',