From 05ac0fba84694ed4bd14dcb088ec21e556409320 Mon Sep 17 00:00:00 2001
From: Ben Silverman <bsilverm@mit.edu>
Date: Mon, 28 Dec 2020 10:29:41 -0500
Subject: [PATCH] #106 Add nprogress page loader

---
 package-lock.json  | 5 +++++
 package.json       | 1 +
 src/pages/_app.jsx | 7 +++++++
 3 files changed, 13 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index e4b0284f..53e06c82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16386,6 +16386,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
diff --git a/package.json b/package.json
index b147a8e0..5bf8528b 100644
--- 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
index f1f8eacd..c8e5573a 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,6 +1,9 @@
 /* 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';
@@ -8,6 +11,10 @@ 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 (