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')
     }
   }
 

lib/global.js

@@ -4,6 +4,7 @@ import Router, { useRouter } from 'next/router'
 import BLOG from '@/blog.config'
 import { ALL_THEME, initDarkMode, initTheme, saveThemeToCookies } from '@/lib/theme'
 import NProgress from 'nprogress'
+import LoadingCover from '@/components/LoadingCover'
 
 const GlobalContext = createContext()
 
@@ -14,11 +15,12 @@ const GlobalContext = createContext()
  * @constructor
  */
 export function GlobalContextProvider({ children }) {
-  const [lang, updateLang] = useState(BLOG.LANG)
-  const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG))
-  const [theme, setTheme] = useState(BLOG.THEME)
-  const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark')
-  const [onLoading, changeLoadingState] = useState(false)
+  const [lang, updateLang] = useState(BLOG.LANG) // 默认语言
+  const [locale, updateLocale] = useState(generateLocaleDict(BLOG.LANG)) // 默认语言
+  const [theme, setTheme] = useState(BLOG.THEME) // 默认博客主题
+  const [isDarkMode, updateDarkMode] = useState(BLOG.APPEARANCE === 'dark') // 默认深色模式
+  const [onLoading, setOnLoading] = useState(false) // 加载文章数据
+  const [onReading, setOnReading] = useState(true) // 资源加载中
   const router = useRouter()
 
   useEffect(() => {
@@ -30,11 +32,11 @@ export function GlobalContextProvider({ children }) {
   useEffect(() => {
     const handleStart = (url) => {
       NProgress.start()
-      changeLoadingState(true)
+      setOnLoading(true)
     }
     const handleStop = () => {
       NProgress.done()
-      changeLoadingState(false)
+      setOnLoading(false)
     }
 
     router.events.on('routeChangeStart', handleStart)
@@ -66,20 +68,20 @@ export function GlobalContextProvider({ children }) {
   }
 
   return (
-        <GlobalContext.Provider value={
-            {
-              onLoading,
-              changeLoadingState,
-              locale,
-              updateLocale,
-              isDarkMode,
-              updateDarkMode,
-              theme,
-              setTheme,
-              switchTheme,
-              changeTheme
-            }
-        }>
+        <GlobalContext.Provider value={{
+          onLoading,
+          setOnLoading,
+          locale,
+          updateLocale,
+          isDarkMode,
+          updateDarkMode,
+          theme,
+          setTheme,
+          switchTheme,
+          changeTheme,
+          setOnReading
+        }}>
+            <LoadingCover onReading={onReading} setOnReading={setOnReading}/>
             {children}
         </GlobalContext.Provider>
   )

pages/[...slug].js

@@ -18,7 +18,7 @@ import Loading from '@/components/Loading'
  * @returns
  */
 const Slug = memorize(props => {
-  const { theme, changeLoadingState } = useGlobal()
+  const { theme, setOnLoading } = useGlobal()
   const { post, siteInfo } = props
   const router = useRouter()
 
@@ -27,7 +27,7 @@ const Slug = memorize(props => {
   const LayoutSlug = dynamic(() => import(`@/themes/${theme}`).then(async (m) => { return m.LayoutSlug }), { ssr: true, loading: () => <Loading /> })
 
   useEffect(() => {
-    changeLoadingState(false)
+    setOnLoading(false)
     if (post?.password && post?.password !== '') {
       setLock(true)
     } else {