重构优化主题异步加载

components/Live2D.js

@@ -6,9 +6,10 @@ import { useEffect } from 'react'
 
 export default function Live2D() {
   const { theme, switchTheme } = useGlobal()
+  const showPet = JSON.parse(BLOG.WIDGET_PET)
 
   useEffect(() => {
-    if (BLOG.WIDGET_PET) {
+    if (showPet) {
       Promise.all([
         loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
       ]).then((e) => {
@@ -17,7 +18,7 @@ export default function Live2D() {
           try {
             loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
           } catch (error) {
-
+            console.error('读取PET模型', error)
           }
         }
       })
@@ -30,7 +31,7 @@ export default function Live2D() {
     }
   }
 
-  if (!BLOG.WIDGET_PET || !JSON.parse(BLOG.WIDGET_PET)) {
+  if (!showPet) {
     return <></>
   }
 

components/Loading.js

@@ -1,21 +1,22 @@
-import { useGlobal } from '@/lib/global'
-import { useEffect } from 'react'
 
 /**
  * 主题文件被加载出之前的占位符
  * @returns
  */
 const Loading = (props) => {
-  const { theme, setOnReading } = useGlobal()
+//   const { theme, setOnReading } = useGlobal()
+  //   console.log('开启遮罩')
+  //   setOnReading(true)
 
-  useEffect(() => {
-    // 返回一个函数，在组件销毁时设置 onReading 为 false
-    return () => {
-      setTimeout(() => {
-        setOnReading(false)
-      }, 500)
-    }
-  }, [theme])
+  //   useEffect(() => {
+  //     // 返回一个函数，在组件销毁时设置 onReading 为 false
+  //     return () => {
+  //       setTimeout(() => {
+  //         console.log('关闭遮罩')
+  //         setOnReading(false)
+  //       }, 500)
+  //     }
+  //   })
 
   return <div className="w-screen h-screen flex justify-center items-center bg-black">
        <i className='mr-5 fas fa-spinner animate-spin text-2xl' />

components/LoadingCover.js

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