fix: improve magzine homepage loading state

Author: tangly1024

themes/magzine/index.js

@@ -39,6 +39,38 @@ import TouchMeCard from './components/TouchMeCard'
 import CONFIG from './config'
 import { Style } from './style'
 
+const IndexSkeleton = () => (
+  <div className='pt-10 md:pt-18'>
+    <div className='w-full bg-[#f6f6f1] dark:bg-black'>
+      <div className='mx-auto w-full max-w-screen-3xl px-4 py-10 lg:px-0'>
+        <div className='grid gap-10 xl:grid-cols-2'>
+          <section className='space-y-5'>
+            <div className='h-80 w-full animate-pulse bg-gray-200 dark:bg-gray-800' />
+            <div className='h-4 w-24 animate-pulse bg-gray-200 dark:bg-gray-800' />
+            <div className='h-10 w-4/5 animate-pulse bg-gray-200 dark:bg-gray-800' />
+            <div className='h-4 w-2/3 animate-pulse bg-gray-200 dark:bg-gray-800' />
+          </section>
+          <section className='space-y-6'>
+            <div className='h-48 w-full animate-pulse bg-gray-200 dark:bg-gray-800' />
+            {[0, 1].map(item => (
+              <div
+                key={item}
+                className='flex gap-6 border-t border-gray-300 pt-6 dark:border-gray-800'>
+                <div className='min-w-0 flex-1 space-y-3'>
+                  <div className='h-4 w-20 animate-pulse bg-gray-200 dark:bg-gray-800' />
+                  <div className='h-6 w-4/5 animate-pulse bg-gray-200 dark:bg-gray-800' />
+                  <div className='h-4 w-2/3 animate-pulse bg-gray-200 dark:bg-gray-800' />
+                </div>
+                <div className='h-32 w-32 shrink-0 animate-pulse bg-gray-200 dark:bg-gray-800' />
+              </div>
+            ))}
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
 // 主题全局状态
 const ThemeGlobalMagzine = createContext()
 export const useMagzineGlobal = () => useContext(ThemeGlobalMagzine)
@@ -75,7 +107,7 @@ const LayoutBase = props => {
             <div
               id='main'
               role='main'
-              className='flex-grow' // 这个类保证 main 区域填满剩余的空白
+              className='flex-grow min-h-[60vh] bg-[#f6f6f1] dark:bg-black'
             >
               {children}
             </div>
@@ -100,7 +132,11 @@ const LayoutBase = props => {
  * @returns
  */
 const LayoutIndex = props => {
-  const { posts } = props
+  const posts = Array.isArray(props?.posts) ? props.posts : []
+
+  if (posts.length === 0) {
+    return <IndexSkeleton />
+  }
 
    // ===== 1. Hero区域 =====
   const heroTopPosts = posts.slice(0, 1)

themes/theme.js

@@ -10,6 +10,43 @@ const baseLayoutCache = new Map()
 const layoutByThemeCache = new Map()
 let domFixTimer = null
 
+const MagzineLayoutLoading = () => (
+  <div className='w-full bg-[#f6f6f1] dark:bg-black'>
+    <div className='mx-auto w-full max-w-screen-3xl px-4 py-10 lg:px-0'>
+      <div className='grid gap-10 xl:grid-cols-2'>
+        <div className='space-y-5'>
+          <div className='h-80 w-full animate-pulse bg-gray-200 dark:bg-gray-800' />
+          <div className='h-4 w-28 animate-pulse bg-gray-200 dark:bg-gray-800' />
+          <div className='h-10 w-4/5 animate-pulse bg-gray-200 dark:bg-gray-800' />
+          <div className='h-4 w-2/3 animate-pulse bg-gray-200 dark:bg-gray-800' />
+        </div>
+        <div className='space-y-6'>
+          <div className='h-48 w-full animate-pulse bg-gray-200 dark:bg-gray-800' />
+          {[0, 1].map(item => (
+            <div
+              key={item}
+              className='flex gap-6 border-t border-gray-300 pt-6 dark:border-gray-800'>
+              <div className='min-w-0 flex-1 space-y-3'>
+                <div className='h-4 w-24 animate-pulse bg-gray-200 dark:bg-gray-800' />
+                <div className='h-6 w-4/5 animate-pulse bg-gray-200 dark:bg-gray-800' />
+                <div className='h-4 w-2/3 animate-pulse bg-gray-200 dark:bg-gray-800' />
+              </div>
+              <div className='h-32 w-32 shrink-0 animate-pulse bg-gray-200 dark:bg-gray-800' />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+const getLayoutLoading = (themeName, layoutName) => {
+  if (themeName === 'magzine' && layoutName === 'LayoutIndex') {
+    return MagzineLayoutLoading
+  }
+  return undefined
+}
+
 const normalizeThemeName = themeValue => {
   if (!themeValue || typeof themeValue !== 'string') return BLOG.THEME
   const firstTheme = themeValue.split(',')[0].trim()
@@ -139,7 +176,7 @@ export const useLayoutByTheme = ({ layoutName, theme }) => {
         }
         return Selected
       }),
-    { ssr: true }
+    { ssr: true, loading: getLayoutLoading(themeQuery, layoutName) }
   )
   layoutByThemeCache.set(cacheKey, DynamicLayoutComponent)
   scheduleFixThemeDOM(themeQuery === BLOG.THEME ? 80 : 240)