Added progress bar/spinner on route change

twankruiswijk · Apr 7, 2022 · 9fcf527 · 9fcf527 · vercel · Apr 7, 2022
1 parent b6faef7
commit 9fcf527
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@typeform/embed-react": "^1.14.0",
     "fathom-client": "^3.4.1",
     "next": "^12.1.4",
+    "nprogress": "^0.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "sharp": "^0.30.3",

diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -4,6 +4,8 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import fetcher from '@/lib/fetcher';
 import * as Fathom from 'fathom-client';
+import NProgress from 'nprogress';
+import '@/styles/nprogress.css';
 
 import { FilterProvider } from 'context/filterContext';
 import '../styles/globals.css';
@@ -31,6 +33,26 @@ function MyApp({ Component, pageProps }) {
     };
   }, []);
 
+  useEffect(() => {
+    const handleStart = () => {
+      NProgress.start();
+    };
+
+    const handleStop = () => {
+      NProgress.done();
+    };
+
+    router.events.on('routeChangeStart', handleStart);
+    router.events.on('routeChangeComplete', handleStop);
+    router.events.on('routeChangeError', handleStop);
+
+    return () => {
+      router.events.off('routeChangeStart', handleStart);
+      router.events.off('routeChangeComplete', handleStop);
+      router.events.off('routeChangeError', handleStop);
+    };
+  }, [router]);
+
   return (
     <>
       <Head>

diff --git a/src/styles/nprogress.css b/src/styles/nprogress.css
@@ -0,0 +1,89 @@
+/* 
+  IMPORTANT - WE HAVE CUSTOMIZED THESE VALUES FOR OUR CUSTOM THEME 
+  
+  1. UPDATED THE COLORS
+  2. UPDATE PLACEMENT OF SPINNER
+    2.1. SHOW THE BAR AT THE TOP OF THE PAGE AND THE SPINNER AT THE BOTTOM
+*/
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #26a4ff;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 4px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #26a4ff, 0 0 5px #26a4ff;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  bottom: 15px;
+  right: 25px;
+}
+
+#nprogress .spinner-icon {
+  width: 25px;
+  height: 25px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #26a4ff;
+  border-left-color: #26a4ff;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}