reading resources

components/Loading.js

@@ -1,15 +1,22 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect } from 'react'
 
 /**
  * 主题文件被加载出之前的占位符
  * @returns
  */
 const Loading = (props) => {
-  const { current } = props
+  const { theme, setOnReading } = useGlobal()
 
-  return <>
-  {current || <div className="w-screen h-screen flex justify-center items-center bg-white dark:bg-black">
-          <h1>Loading... <i className='ml-2 fas fa-spinner animate-spin' /></h1>
-      </div>}
-  </>
+  useEffect(() => {
+    // 返回一个函数，在组件销毁时设置 onReading 为 false
+    return () => {
+      setOnReading(false)
+    }
+  }, [theme])
+
+  return <div className="w-screen h-screen flex justify-center items-center dark:bg-black text-black dark:text-white">
+        <h1 className="text-2xl"><i className='mr-5 fas fa-spinner animate-spin' />Loading...</h1>
+    </div>
 }
 export default Loading

components/LoadingCover.js

@@ -0,0 +1,15 @@
+
+/**
+ * 加载主题文件时的全局遮罩
+ * @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>
+    </>
+}
+export default LoadingCover

components/SideBarDrawer.js

@@ -29,11 +29,11 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
     if (showStatus) {
-      sideBarDrawer.classList.replace('-ml-60', 'ml-0')
-      sideBarDrawerBackground.classList.replace('hidden', 'block')
+      sideBarDrawer?.classList.replace('-ml-60', 'ml-0')
+      sideBarDrawerBackground?.classList.replace('hidden', 'block')
     } else {
-      sideBarDrawer.classList.replace('ml-0', '-ml-60')
-      sideBarDrawerBackground.classList.replace('block', 'hidden')
+      sideBarDrawer?.classList.replace('ml-0', '-ml-60')
+      sideBarDrawerBackground?.classList.replace('block', 'hidden')
     }
   }