From bed73102b426c0a107e9e18b884a83c85e9cb18d Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Mon, 14 Jul 2025 23:42:03 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20fade-in=20animation?=
 =?UTF-8?q?=20for=20greeting=20message?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add greetingVisible state to control animation trigger
- Implement fade-in effect with 1-second smooth transition
- Set 100ms delay before animation starts
- Apply opacity transition from 0 to 1 using ease-in-out timing
- Enhance user experience with smooth visual feedback on page load

The greeting message now appears with an elegant fade-in animation,
transitioning from transparent to fully visible over 1 second,
providing better visual appeal and user engagement.
---
 web/src/pages/Detail/index.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/Detail/index.js b/web/src/pages/Detail/index.js
index c8648656..523283b6 100644
--- a/web/src/pages/Detail/index.js
+++ b/web/src/pages/Detail/index.js
@@ -193,6 +193,7 @@ const Detail = (props) => {
   const [dataExportDefaultTime, setDataExportDefaultTime] = useState(getDefaultTime());
 
   const [loading, setLoading] = useState(false);
+  const [greetingVisible, setGreetingVisible] = useState(false);
   const [quotaData, setQuotaData] = useState([]);
   const [consumeQuota, setConsumeQuota] = useState(0);
   const [consumeTokens, setConsumeTokens] = useState(0);
@@ -752,6 +753,13 @@ const Detail = (props) => {
     return () => clearTimeout(timer);
   }, [uptimeData, activeUptimeTab]);
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setGreetingVisible(true);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
   const getUserData = async () => {
     let res = await API.get(`/api/user/self`);
     const { success, message, data } = res.data;
@@ -1112,7 +1120,12 @@ const Detail = (props) => {
   return (
     <div className="bg-gray-50 h-full mt-[64px]">
       <div className="flex items-center justify-between mb-4">
-        <h2 className="text-2xl font-semibold text-gray-800">{getGreeting}</h2>
+        <h2
+          className="text-2xl font-semibold text-gray-800 transition-opacity duration-1000 ease-in-out"
+          style={{ opacity: greetingVisible ? 1 : 0 }}
+        >
+          {getGreeting}
+        </h2>
         <div className="flex gap-3">
           <Button
             type='tertiary'