From 7cf1d8791310007a5051dd0e00146fa0108414f3 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Thu, 24 Feb 2022 13:51:48 -0500
Subject: [PATCH] Add loading bar on page route change
---
src/cryptometrics/package.json | 1 +
src/cryptometrics/pages/_app.js | 7 +++++++
src/cryptometrics/styles/globals.css | 13 +++++++++++++
src/cryptometrics/yarn.lock | 5 +++++
4 files changed, 26 insertions(+)
diff --git a/src/cryptometrics/package.json b/src/cryptometrics/package.json
index 554054a..4869935 100644
--- a/src/cryptometrics/package.json
+++ b/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",
diff --git a/src/cryptometrics/pages/_app.js b/src/cryptometrics/pages/_app.js
index 22bb771..e5d964e 100644
--- a/src/cryptometrics/pages/_app.js
+++ b/src/cryptometrics/pages/_app.js
@@ -1,6 +1,13 @@
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();
diff --git a/src/cryptometrics/styles/globals.css b/src/cryptometrics/styles/globals.css
index edd5ea5..4031aa2 100644
--- a/src/cryptometrics/styles/globals.css
+++ b/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;
+}
diff --git a/src/cryptometrics/yarn.lock b/src/cryptometrics/yarn.lock
index a511620..947af11 100644
--- a/src/cryptometrics/yarn.lock
+++ b/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"
--
GitLab