diff --git a/app.css b/app.css index 2b1f359..db1039e 100644 --- a/app.css +++ b/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); } +} \ No newline at end of file diff --git a/package.json b/package.json index 1f1e714..0c3da31 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index 7acdc23..0cfb814 100644 --- a/pages/_app.tsx +++ b/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) diff --git a/yarn.lock b/yarn.lock index 231644c..6fcce5a 100644 --- a/yarn.lock +++ b/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"