切换主题加遮罩过渡

components/LoadingCover.js

@@ -1,14 +0,0 @@
-
-/**
- * 加载文件时的全局遮罩
- * @returns
- */
-const LoadingCover = (props) => {
-  const { onReading } = props
-
-  return <div className={`${onReading ? 'opacity-30' : 'opacity-0'}  bg-black text-white shadow-text w-screen h-screen flex justify-center items-center
-                            transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
-        <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
-    </div>
-}
-export default LoadingCover

components/ThemeSwitch.js

@@ -1,5 +1,5 @@
 import { useGlobal } from '@/lib/global'
-import React from 'react'
+import React, { useState } from 'react'
 import { Draggable } from './Draggable'
 import { THEMES } from '@/themes/theme'
 import { useRouter } from 'next/router'
@@ -11,14 +11,18 @@ import DarkModeButton from './DarkModeButton'
 const ThemeSwitch = () => {
   const { theme } = useGlobal()
   const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
 
   // 修改当前路径url中的 theme 参数
   // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
   const onSelectChange = (e) => {
+    setIsLoading(true)
     const newTheme = e.target.value
     const query = router.query
     query.theme = newTheme
-    router.push({ pathname: router.pathname, query })
+    router.push({ pathname: router.pathname, query }).then(() => {
+      setIsLoading(false)
+    })
   }
 
   return (<>
@@ -36,6 +40,11 @@ const ThemeSwitch = () => {
                     <i className="fa-solid fa-palette pl-2"></i>
                 </div>
             </div>
+            {/* 切换主题加载时的全屏遮罩 */}
+            <div className={`${isLoading ? 'opacity-50 ' : 'opacity-0'} w-screen h-screen bg-black text-white shadow-text flex justify-center items-center
+                              transition-all fixed top-0 left-0 pointer-events-none duration-1000 z-50 shadow-inner`}>
+                <i className='text-3xl mr-5 fas fa-spinner animate-spin' />
+            </div>
         </Draggable>
     </>
   )

lib/global.js

@@ -21,24 +21,11 @@ export function GlobalContextProvider({ children }) {
   const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
   const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
   const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
-  //   const [onReading, setOnReading] = useState(false) // 网页资源加载
 
   useEffect(() => {
     initLocale(lang, locale, updateLang, updateLocale)
     initDarkMode(isDarkMode, updateDarkMode)
     initTheme()
-    if (isBrowser()) {
-      // 监听用户刷新页面
-      const handleBeforeUnload = (event) => {
-        // setOnReading(true)
-      }
-      // 监听页面元素加载完
-      //   setOnReading(false)
-      window.addEventListener('beforeunload', handleBeforeUnload)
-      return () => {
-        window.removeEventListener('beforeunload', handleBeforeUnload)
-      }
-    }
   }, [])
 
   useEffect(() => {