From b66c2b1f37093a238f39eee52b69624229903376 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Mon, 24 Jul 2023 14:48:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=B8=BB=E9=A2=98=E5=8A=A0?=
 =?UTF-8?q?=E9=81=AE=E7=BD=A9=E8=BF=87=E6=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/LoadingCover.js | 14 --------------
 components/ThemeSwitch.js  | 13 +++++++++++--
 lib/global.js              | 13 -------------
 3 files changed, 11 insertions(+), 29 deletions(-)
 delete mode 100644 components/LoadingCover.js

diff --git a/components/LoadingCover.js b/components/LoadingCover.js
deleted file mode 100644
index e10131dd..00000000
--- a/components/LoadingCover.js
+++ /dev/null
@@ -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
diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index ab11bab5..1e140d79 100644
--- a/components/ThemeSwitch.js
+++ b/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>
     </>
   )
diff --git a/lib/global.js b/lib/global.js
index a080f270..9cafd304 100644
--- a/lib/global.js
+++ b/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(() => {