From f1e3d77d7cb7036511dd4d889a592f8a6c21796c Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Thu, 21 Nov 2024 15:23:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=87=92=E5=8A=A0=E8=BD=BD=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E3=80=81LoadingCover=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/LazyImage.js    | 27 ++++++++++++++++++++++-----
 components/LoadingCover.js |  1 +
 lib/global.js              |  2 +-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/components/LazyImage.js b/components/LazyImage.js
index 02f1df19..a5437883 100644
--- a/components/LazyImage.js
+++ b/components/LazyImage.js
@@ -59,7 +59,6 @@ export default function LazyImage({
   useEffect(() => {
     const adjustedImageSrc =
       adjustImgSize(src, maxWidth) || defaultPlaceholderSrc
-
     // 加载原图
     const img = new Image()
     img.src = adjustedImageSrc
@@ -68,7 +67,6 @@ export default function LazyImage({
       handleImageLoaded(adjustedImageSrc)
     }
     img.onerror = handleImageError
-
     const observer = new IntersectionObserver(
       entries => {
         entries.forEach(entry => {
@@ -81,11 +79,9 @@ export default function LazyImage({
       },
       { rootMargin: '50px 0px' } // Adjust the rootMargin as needed to trigger the loading earlier or later
     )
-
     if (imageRef.current) {
       observer.observe(imageRef.current)
     }
-
     return () => {
       if (imageRef.current) {
         observer.unobserve(imageRef.current)
@@ -97,6 +93,7 @@ export default function LazyImage({
   const imgProps = {
     ref: imageRef,
     src: currentSrc,
+    'data-src': src,
     alt: alt,
     onLoad: handleThumbnailLoaded, // 缩略图加载完成
     onError: handleImageError // 添加onError处理函数
@@ -118,7 +115,7 @@ export default function LazyImage({
     imgProps.height = height
   }
   if (className) {
-    imgProps.className = className
+    imgProps.className = className + ' lazy-image-placeholder'
   }
   if (style) {
     imgProps.style = style
@@ -126,6 +123,11 @@ export default function LazyImage({
   if (onClick) {
     imgProps.onClick = onClick
   }
+
+  if (!src) {
+    return null
+  }
+
   return (
     <>
       {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -136,6 +138,21 @@ export default function LazyImage({
           <link rel='preload' as='image' href={adjustImgSize(src, maxWidth)} />
         </Head>
       )}
+      <style>
+        {` 
+        .lazy-image-placeholder{
+
+        background: 
+            linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%)
+            #f2f2f2;
+        background-size:300% 100%;
+        animation: l1 1s infinite linear;
+        }
+        @keyframes l1 {
+        0% {background-position: right}
+        }
+        `}
+      </style>
     </>
   )
 }
diff --git a/components/LoadingCover.js b/components/LoadingCover.js
index 9e24e255..f90ba6b3 100644
--- a/components/LoadingCover.js
+++ b/components/LoadingCover.js
@@ -1,3 +1,4 @@
+'user client'
 import { useGlobal } from '@/lib/global'
 import { useEffect, useState } from 'react'
 /**
diff --git a/lib/global.js b/lib/global.js
index a4297187..b9e84660 100644
--- a/lib/global.js
+++ b/lib/global.js
@@ -39,7 +39,7 @@ export function GlobalContextProvider(props) {
 
   const defaultDarkMode = NOTION_CONFIG?.APPEARANCE || APPEARANCE
   const [isDarkMode, updateDarkMode] = useState(defaultDarkMode === 'dark') // 默认深色模式
-  const [onLoading, setOnLoading] = useState(true) // 抓取文章数据
+  const [onLoading, setOnLoading] = useState(false) // 抓取文章数据
   const router = useRouter()
 
   // 登录验证相关