feature:

加入loading页面

components/BlogPostCard.js

@@ -12,7 +12,7 @@ const BlogPostCard = ({ post, tags }) => {
      w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700'>
       <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
         <div className='w-full h-60 rounded-t-xl md:rounded-t-none md:rounded-l-xl md:h-full duration-200 cursor-pointer transform col-span-2 overflow-hidden'>
-          <Image className='hover:scale-105 transform duration-500' src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
+          <Image className='hover:scale-105 transform duration-500 rounded-t-xl md:rounded-t-none md:rounded-l-xl' src={(post.page_cover && post.page_cover.length > 1) ? post.page_cover : BLOG.defaultImgCover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
         </div>
       </Link>
 

components/LoadingCover.js

@@ -0,0 +1,11 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+
+export default function LoadingCover () {
+  return (<div id="loading-cover" className={'bg-white dark:bg-gray-800 dark:text-white text-black animate__animated animate__fadeIn flex-grow flex flex-col justify-center z-10 w-full h-screen container mx-auto'}>
+  <div className="mx-auto">
+    <FontAwesomeIcon icon={faSpinner} spin={true} className="text-2xl" />
+  </div>
+</div>
+  )
+}

layouts/BaseLayout.js

@@ -9,6 +9,7 @@ import SideBar from '@/components/SideBar'
 import JumpToTopButton from '@/components/JumpToTopButton'
 import { useGlobal } from '@/lib/global'
 import DarkModeButton from '@/components/DarkModeButton'
+import LoadingCover from '@/components/LoadingCover'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -61,7 +62,7 @@ const BaseLayout = ({
       window.removeEventListener('scroll', scrollTrigger)
     }
   })
-  const { theme } = useGlobal()
+  const { onLoading, theme } = useGlobal()
   const targetRef = useRef(null)
 
   return (
@@ -77,9 +78,13 @@ const BaseLayout = ({
           <SideBar post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory} />
         </div>
         <div className='flex flex-grow min-h-screen' ref={targetRef}>
-          <div className='flex-grow bg-gray-50 dark:bg-black shadow-inner'>
-            {children}
-          </div>
+
+          {onLoading
+            ? <LoadingCover/>
+            : <div className='flex-grow bg-gray-50 dark:bg-black shadow-inner animate__animated animate__fadeIn'>
+              {children}
+            </div>
+          }
         </div>
       </div>
 

lib/global.js

@@ -1,6 +1,7 @@
 import lang from './lang'
 import { useContext, createContext, useState, useEffect } from 'react'
 import cookie from 'react-cookies'
+import Router from 'next/router'
 
 const GlobalContext = createContext()
 
@@ -13,6 +14,15 @@ const GlobalContext = createContext()
 export function GlobalContextProvider ({ children }) {
   const [locale, changeLocale] = useState(generateLocaleDict('en-US'))
   const [theme, changeTheme] = useState(loadUserThemeFromCookies())
+  const [onLoading, changeLoadingState] = useState(false)
+  Router.events.on('routeChangeStart', (...args) => {
+    changeLoadingState(true)
+  })
+
+  Router.events.on('routeChangeComplete', (...args) => {
+    changeLoadingState(false)
+  })
+
   // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作
   useEffect(() => {
     initTheme(theme, changeTheme)
@@ -20,7 +30,9 @@ export function GlobalContextProvider ({ children }) {
   })
 
   return (
-    <GlobalContext.Provider value={{ locale, theme, changeTheme }}>{children}</GlobalContext.Provider>
+    <GlobalContext.Provider value={{ onLoading, locale, theme, changeTheme }}>
+      {children}
+    </GlobalContext.Provider>
   )
 }