Add loading bar on page route change

src/cryptometrics/package.json

@@ -13,6 +13,7 @@
     "axios": "^0.26.0",
     "classnames": "^2.3.1",
     "next": "12.1.0",
+    "nprogress": "^0.2.0",
     "numeral": "^2.0.6",
     "react": "17.0.2",
     "react-apexcharts": "^1.3.9",

src/cryptometrics/pages/_app.js

 import "../styles/globals.css";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
+import Router from "next/router";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+Router.events.on("routeChangeStart", () => NProgress.start());
+Router.events.on("routeChangeComplete", () => NProgress.done());
+Router.events.on("routeChangeError", () => NProgress.done());
 
 const queryClient = new QueryClient();
 

src/cryptometrics/styles/globals.css

@@ -11,3 +11,16 @@
     @apply bg-dark-800;
   }
 }
+
+#nprogress .bar {
+  background: rgb(37 99 235) !important;
+}
+
+#nprogress .spinner-icon {
+  border-top-color: rgb(37 99 235) !important;
+  border-left-color: rgb(37 99 235) !important;
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px rgb(37 99 235), 0 0 5px rgb(37 99 235) !important;
+}

src/cryptometrics/yarn.lock

@@ -1491,6 +1491,11 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
+
 numeral@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"