HEO添加加载动画

lib/global.js

@@ -15,12 +15,6 @@ import {
 } from './lang'
 const GlobalContext = createContext()
 
-/**
- * 定义全局变量，包括语言、主题、深色模式、加载状态
- * @param children
- * @returns {JSX.Element}
- * @constructor
- */
 export function GlobalContextProvider(props) {
   const {
     post,
@@ -40,7 +34,7 @@ export function GlobalContextProvider(props) {
 
   const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE
   const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
-  const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
+  const [onLoading, setOnLoading] = useState(true) // 抓取文章数据
   const router = useRouter()
 
   // 是否全屏
@@ -74,10 +68,6 @@ export function GlobalContextProvider(props) {
     htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
-  /**
-   * 更新语言
-   * 这里是代码级别的多语言，整个站点和文章内容的多语言不在此处理
-   */
   function changeLang(lang) {
     if (lang) {
       saveLangToLocalStorage(lang)
@@ -89,13 +79,12 @@ export function GlobalContextProvider(props) {
   useEffect(() => {
     initDarkMode(updateDarkMode, defaultDarkMode)
     initLocale(lang, locale, updateLang, updateLocale)
-    // 可以
     if (NOTION_CONFIG?.REDIRECT_LANG) {
       redirectUserLang(NOTION_PAGE_ID)
     }
+    setOnLoading(false)
   }, [])
 
-  // 加载进度条
   useEffect(() => {
     const handleStart = url => {
       const { theme } = router.query
@@ -103,10 +92,15 @@ export function GlobalContextProvider(props) {
         const newUrl = `${url}${url.includes('?') ? '&' : '?'}theme=${theme}`
         router.push(newUrl)
       }
-      setOnLoading(true)
+      if (!onLoading) {
+        setOnLoading(true)
+      }
     }
+
     const handleStop = () => {
-      setOnLoading(false)
+      if (onLoading) {
+        setOnLoading(false)
+      }
     }
 
     const currentTheme = router?.query?.theme || theme
@@ -120,7 +114,7 @@ export function GlobalContextProvider(props) {
       router.events.off('routeChangeComplete', handleStop)
       router.events.off('routeChangeError', handleStop)
     }
-  }, [router])
+  }, [router, onLoading])
 
   return (
     <GlobalContext.Provider