From d8a9270ce69cc300ed04fc35221336b564f00d12 Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Mon, 27 Feb 2023 20:09:34 -0600
Subject: [PATCH] Add nprogress hook ^& css

---
 package.json              |  2 ++
 src/pages/_app.tsx        | 19 +++++++++++--------
 src/utils/useNProgress.ts | 29 +++++++++++++++++++++++++++++
 yarn.lock                 | 10 ++++++++++
 4 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/useNProgress.ts

diff --git a/package.json b/package.json
index 6312cd0..e4db637 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@tailwindcss/forms": "^0.5.3",
     "@types/node": "18.14.0",
+    "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -20,6 +21,7 @@
     "ioredis": "^5.3.1",
     "life360-node-api": "^0.0.10",
     "next": "13.1.6",
+    "nprogress": "^0.2.0",
     "postcss": "^8.4.21",
     "prismjs": "^1.29.0",
     "react": "18.2.0",
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 3373bc0..26c2e6a 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,12 +1,15 @@
-import {AppType} from "next/app";
-import "@/styles/globals.scss";
+import { AppType } from 'next/app';
+import useNProgress from '@/utils/useNProgress';
+import '@/styles/globals.scss';
+import 'nprogress/nprogress.css';
 
 const MyApp: AppType = ({ Component, pageProps }) => {
-    return (
-        <>
-                <Component {...pageProps} />
-        </>
-    );
+	useNProgress();
+	return (
+		<>
+			<Component {...pageProps} />
+		</>
+	);
 };
 
-export default MyApp;
\ No newline at end of file
+export default MyApp;
diff --git a/src/utils/useNProgress.ts b/src/utils/useNProgress.ts
new file mode 100644
index 0000000..f5ca33e
--- /dev/null
+++ b/src/utils/useNProgress.ts
@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import NProgress from 'nprogress';
+
+const useNProgress = () => {
+	// Setup progress bar router-based listeners
+	const router = useRouter();
+	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]);
+};
+
+export default useNProgress;
diff --git a/yarn.lock b/yarn.lock
index 2044559..15cb34b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -186,6 +186,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.36.tgz#c414052cb9d43fab67d679d5f3c641be911f5835"
   integrity sha512-FXKWbsJ6a1hIrRxv+FoukuHnGTgEzKYGi7kilfMae96AL9UNkPFNWJEEYWzdRI9ooIkbr4AKldyuSTLql06vLQ==
 
+"@types/nprogress@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
+  integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
+
 "@types/prismjs@^1.26.0":
   version "1.26.0"
   resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
@@ -686,6 +691,11 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 object-hash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"