From 2e8e027ae7d6491f3a73e838b34ebd24fbb7422a Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 12 Dec 2020 15:55:07 +0200
Subject: [PATCH] closes #199
---
package-lock.json | 11 ++++++
package.json | 2 ++
pages/_app.tsx | 15 ++++++++
public/nprogress.css | 81 ++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 109 insertions(+)
create mode 100644 public/nprogress.css
diff --git a/package-lock.json b/package-lock.json
index 33f3aa30b..fd36732ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1859,6 +1859,12 @@
"integrity": "sha512-BJ97wAUuU3NUiUCp44xzUFquQEvnk1wu7q4CMEUYKJWjdkr0YWYDsm4RFtAvxYsNjLsKcrFt6RvK8r+mnzMbEQ==",
"dev": true
},
+ "@types/nprogress": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.0.tgz",
+ "integrity": "sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==",
+ "dev": true
+ },
"@types/object-assign": {
"version": "4.0.30",
"resolved": "https://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
@@ -7292,6 +7298,11 @@
"set-blocking": "~2.0.0"
}
},
+ "nprogress": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+ "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+ },
"number-is-nan": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
diff --git a/package.json b/package.json
index e3f36b7f4..a169a064b 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
"next-auth": "^3.1.0",
"next-google-fonts": "^1.2.1",
"next-images": "^1.6.2",
+ "nprogress": "^0.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-draggable": "^4.4.3",
@@ -58,6 +59,7 @@
"@prisma/cli": "^2.12.1",
"@types/next-auth": "^3.1.18",
"@types/node": "^14.14.11",
+ "@types/nprogress": "^0.2.0",
"@types/react": "^17.0.0",
"@types/react-infinite-scroller": "^1.2.1",
"@types/recharts": "^1.8.17",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 2e60e0182..a31ed566f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,10 +8,22 @@ import { locales } from "lib/lists/locales";
import { Provider as NextAuthProvider } from "next-auth/client";
import GoogleFonts from "next-google-fonts";
import type { AppProps } from "next/app";
+import Head from "next/head";
+import { Router } from "next/router";
+import NProgress from "nprogress";
import { useEffect } from "react";
import { theme } from "theme";
import "./styles.css";
+NProgress.configure({ showSpinner: false });
+
+Router.events.on("routeChangeStart", (url) => {
+ console.log(`Loading: ${url}`);
+ NProgress.start();
+});
+Router.events.on("routeChangeComplete", () => NProgress.done());
+Router.events.on("routeChangeError", () => NProgress.done());
+
const extendedTheme = extendTheme({
styles: {
global: (props) => ({
@@ -126,6 +138,9 @@ const MyApp = (props: AppProps) => {
return (
<>
+
+
+
diff --git a/public/nprogress.css b/public/nprogress.css
new file mode 100644
index 000000000..22d18a1a0
--- /dev/null
+++ b/public/nprogress.css
@@ -0,0 +1,81 @@
+/* Make clicks pass-through */
+#nprogress {
+ pointer-events: none;
+}
+
+#nprogress .bar {
+ background: #79ff61;
+
+ position: fixed;
+ z-index: 1031;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+ display: block;
+ position: absolute;
+ right: 0px;
+ width: 100px;
+ height: 100%;
+ box-shadow: 0 0 10px #79ff61, 0 0 5px #79ff61;
+ 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;
+ top: 15px;
+ right: 15px;
+}
+
+#nprogress .spinner-icon {
+ width: 18px;
+ height: 18px;
+ box-sizing: border-box;
+
+ border: solid 2px transparent;
+ border-top-color: #79ff61;
+ border-left-color: #79ff61;
+ 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);
+ }
+}