#106 Add nprogress page loader

mitaai · Dec 28, 2020 · 05ac0fb · 05ac0fb
1 parent 6af79c9
commit 05ac0fb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "next-connect": "^0.8.1",
     "nodemailer": "^6.4.10",
     "nookies": "^2.4.0",
+    "nprogress": "^0.2.0",
     "popper.js": "^1.16.1",
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
@@ -1,13 +1,20 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { useState } from 'react';
 import { Provider } from 'next-auth/client';
+import Router from 'next/router';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
 import 'semantic-ui-css/components/dropdown.min.css';
 import 'semantic-ui-css/components/transition.min.css';
 import 'semantic-ui-css/components/label.min.css';
 import 'semantic-ui-css/components/icon.min.css';
 import 'react-bootstrap-typeahead/css/Typeahead.css';
 import '../style/custom.scss';
 
+Router.events.on('routeChangeStart', () => NProgress.start());
+Router.events.on('routeChangeComplete', () => NProgress.done());
+Router.events.on('routeChangeError', () => NProgress.done());
+
 export default function MyApp({ Component, pageProps }) {
   const [session, setSession] = useState(pageProps.session);
   return (