Merge pull request #906 from tangly1024/feat/progress

Feat/progress

lib/global.js

@@ -1,9 +1,10 @@
 import { generateLocaleDict, initLocale } from './lang'
 import { createContext, useContext, useEffect, useState } from 'react'
-import Router from 'next/router'
+import Router, { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
 import { initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
 import { ALL_THEME } from '@/themes'
+import NProgress from 'nprogress'
 
 const GlobalContext = createContext()
 
@@ -19,6 +20,7 @@ export function GlobalContextProvider({ children }) {
   const [theme, setTheme] = useState(BLOG.THEME)
   const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark')
   const [onLoading, changeLoadingState] = useState(false)
+  const router = useRouter()
 
   useEffect(() => {
     initLocale(lang, locale, updateLang, updateLocale)
@@ -26,13 +28,25 @@ export function GlobalContextProvider({ children }) {
     initTheme(theme, changeTheme)
   }, [])
 
-  Router.events.on('routeChangeStart', (...args) => {
-    changeLoadingState(true)
-  })
+  useEffect(() => {
+    const handleStart = (url) => {
+      NProgress.start()
+      changeLoadingState(true)
+    }
+    const handleStop = () => {
+      NProgress.done()
+      changeLoadingState(false)
+    }
 
-  Router.events.on('routeChangeComplete', (...args) => {
-    changeLoadingState(false)
-  })
+    router.events.on('routeChangeStart', handleStart)
+    router.events.on('routeChangeError', handleStop)
+    router.events.on('routeChangeComplete', handleStop)
+    return () => {
+      router.events.off('routeChangeStart', handleStart)
+      router.events.off('routeChangeComplete', handleStop)
+      router.events.off('routeChangeError', handleStop)
+    }
+  }, [router])
 
   function switchTheme() {
     const currentIndex = ALL_THEME.indexOf(theme)

package.json

@@ -41,6 +41,7 @@
     "next": "^13.1.1",
     "notion-client": "6.15.6",
     "notion-utils": "6.15.6",
+    "nprogress": "^0.2.0",
     "preact": "^10.5.15",
     "prism-themes": "1.9.0",
     "qrcode.react": "^1.0.1",

pages/_app.js

@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic'
 
 import 'animate.css'
 import '@/styles/globals.css'
+import '@/styles/nprogress.css'
 
 // core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'

styles/nprogress.css

@@ -0,0 +1,84 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  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 #29d, 0 0 5px #29d;
+  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: #29d;
+  border-left-color: #29d;
+  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);
+  }
+}