feature:

加入loading页面

lib/global.js

@@ -1,6 +1,7 @@
 import lang from './lang'
 import { useContext, createContext, useState, useEffect } from 'react'
 import cookie from 'react-cookies'
+import Router from 'next/router'
 
 const GlobalContext = createContext()
 
@@ -13,6 +14,15 @@ const GlobalContext = createContext()
 export function GlobalContextProvider ({ children }) {
   const [locale, changeLocale] = useState(generateLocaleDict('en-US'))
   const [theme, changeTheme] = useState(loadUserThemeFromCookies())
+  const [onLoading, changeLoadingState] = useState(false)
+  Router.events.on('routeChangeStart', (...args) => {
+    changeLoadingState(true)
+  })
+
+  Router.events.on('routeChangeComplete', (...args) => {
+    changeLoadingState(false)
+  })
+
   // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作
   useEffect(() => {
     initTheme(theme, changeTheme)
@@ -20,7 +30,9 @@ export function GlobalContextProvider ({ children }) {
   })
 
   return (
-    <GlobalContext.Provider value={{ locale, theme, changeTheme }}>{children}</GlobalContext.Provider>
+    <GlobalContext.Provider value={{ onLoading, locale, theme, changeTheme }}>
+      {children}
+    </GlobalContext.Provider>
   )
 }