Add nprogress hook ^& css

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",

src/pages/_app.tsx

@@ -1,12 +1,15 @@
-import {AppType} from "next/app";
+import { AppType } from 'next/app';
-import "@/styles/globals.scss";
+import useNProgress from '@/utils/useNProgress';
+import '@/styles/globals.scss';
+import 'nprogress/nprogress.css';
 
 const MyApp: AppType = ({ Component, pageProps }) => {
-    return (
+	useNProgress();
-        <>
+	return (
-                <Component {...pageProps} />
+		<>
-        </>
+			<Component {...pageProps} />
-    );
+		</>
+	);
 };
 
-export default MyApp;
+export default MyApp;

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;

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"