feat: added progress bar

app.css

@@ -118,3 +118,78 @@ button {
 .emoji-mart-emoji > span {
 	cursor: pointer;
 }
+
+/* NProgress */
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #3366FF;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 1.5px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #3366FF, 0 0 5px #3366FF;
+  opacity: 1.0;
+
+  -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: #3366FF;
+  border-left-color: #3366FF;
+  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); }
+}

package.json

@@ -20,6 +20,7 @@
 		"@sentry/integrations": "6.2.3",
 		"@sentry/node": "6.2.3",
 		"@sentry/webpack-plugin": "1.14.2",
+		"@types/nprogress": "^0.2.0",
 		"autoprefixer": "10.2.5",
 		"badgen": "3.2.2",
 		"cookie": "0.4.1",
@@ -41,6 +42,7 @@
 		"next-connect": "0.10.1",
 		"next-session": "3.4.0",
 		"node-emoji": "1.10.0",
+		"nprogress": "^0.2.0",
 		"postcss": "8.2.8",
 		"postcss-preset-env": "6.7.0",
 		"react": "17.0.1",

pages/_app.tsx

@@ -1,9 +1,10 @@
 import Head from 'next/head'
 import type { AppProps } from 'next/app'
 import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
+import { Router, useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { GlobalHotKeys } from 'react-hotkeys'
+import NProgress from 'nprogress'
 
 import { init } from '@utils/Sentry'
 import Logger from '@utils/Logger'
@@ -28,6 +29,12 @@ import PlatformDisplay from '@components/PlatformDisplay'
 
 init()
 
+// Progress Bar
+NProgress.configure({ showSpinner: false })
+Router.events.on('routeChangeStart', NProgress.start)
+Router.events.on('routeChangeComplete', NProgress.done)
+Router.events.on('routeChangeError', NProgress.end)
+
 export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX.Element {
 	const [ betaKey, setBetaKey ] = useState('')
 	const [ shortcutModal, setShortcutModal ] = useState(false)

yarn.lock

@@ -1012,6 +1012,11 @@
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
+"@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/prettier@^2.0.0":
   version "2.1.6"
   resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.6.tgz"
@@ -5472,6 +5477,11 @@ npmlog@^4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
+
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz"