From 381766955d00d7d8f5f87bca2c9ba1bfdba1b0c5 Mon Sep 17 00:00:00 2001
From: LazuliKao <LazuliKao233@outlook.com>
Date: Tue, 24 Sep 2024 23:23:08 +0800
Subject: [PATCH] delay logo

---
 src/pages/freshman/join.astro           |  5 ++++-
 src/pages/freshman/react/delayImage.tsx | 25 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/freshman/react/delayImage.tsx

diff --git a/src/pages/freshman/join.astro b/src/pages/freshman/join.astro
index 665c32f..acc38dc 100644
--- a/src/pages/freshman/join.astro
+++ b/src/pages/freshman/join.astro
@@ -1,13 +1,16 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro"
 import ReactChild from "./react/join.tsx"
+import DelayImage from "./react/delayImage"
 import logo from "./_assets/nbtca.gif";
 ---
 
 <BaseLayout title="加入我们">
   <main>
     <div style="margin: -30px;display:flex; justify-content: center;">
-      <img src={logo.src} style="max-width: 450px;" loading="lazy" />
+      <div style="max-width: 450px;">
+        <DelayImage src={logo.src} alt="nbtca" delay={1000} />
+      </div>
     </div>
     <div style="display:flex; justify-content: center;font-size: large;">
       加入计算机协会
diff --git a/src/pages/freshman/react/delayImage.tsx b/src/pages/freshman/react/delayImage.tsx
new file mode 100644
index 0000000..e811479
--- /dev/null
+++ b/src/pages/freshman/react/delayImage.tsx
@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from "react"
+
+interface DelayImageProps {
+  src: string
+  alt: string
+  delay: number // delay in milliseconds
+}
+
+const DelayImage: React.FC<DelayImageProps> = ({ src, alt, delay }) => {
+  const [loaded, setLoaded] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoaded(true)
+    }, delay)
+
+    return () => clearTimeout(timer)
+  }, [delay])
+
+  return (
+    <div>{loaded ? <img src={src} alt={alt} /> : <p>Loading image...</p>}</div>
+  )
+}
+
+export default DelayImage