From 8604c9f9d5dfc2a35179ada4bf2c2a12ca96aa4c Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Wed, 16 Jul 2025 04:02:05 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(HeaderBar):=20ensure=20skeleto?=
 =?UTF-8?q?n=20shows=20=E2=89=A5500=20ms=20and=20waits=20for=20real=20stat?=
 =?UTF-8?q?us=20data?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header’s skeleton screen now remains visible for at least 500 ms and
only disappears after `/api/status` has successfully populated
`StatusContext`.

Changes include:
• Added `loadingStartRef` to record the mount time.
• Reworked loading effect to compute the remaining delay based on the
  elapsed time and the presence of real status data.
• Removed the previous fixed‐timer logic, preventing premature content
  rendering and improving perceived loading consistency across pages.
---
 web/src/components/layout/HeaderBar.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/src/components/layout/HeaderBar.js b/web/src/components/layout/HeaderBar.js
index 9aeb4a79..4d83d48b 100644
--- a/web/src/components/layout/HeaderBar.js
+++ b/web/src/components/layout/HeaderBar.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { UserContext } from '../../context/User/index.js';
 import { useSetTheme, useTheme } from '../../context/Theme/index.js';
@@ -47,6 +47,7 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
   const location = useLocation();
   const [noticeVisible, setNoticeVisible] = useState(false);
   const [unreadCount, setUnreadCount] = useState(0);
+  const loadingStartRef = useRef(Date.now());
 
   const systemName = getSystemName();
   const logo = getLogo();
@@ -196,11 +197,15 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
   }, [i18n]);
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 500);
-    return () => clearTimeout(timer);
-  }, []);
+    if (statusState?.status !== undefined) {
+      const elapsed = Date.now() - loadingStartRef.current;
+      const remaining = Math.max(0, 500 - elapsed);
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, remaining);
+      return () => clearTimeout(timer);
+    }
+  }, [statusState?.status]);
 
   const handleLanguageChange = (lang) => {
     i18n.changeLanguage(lang);