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)