From d72b6341a5d86d871b56628ea7912a86682b86b7 Mon Sep 17 00:00:00 2001
From: cialloo <admin@cialloo.com>
Date: Sun, 5 Oct 2025 07:58:00 +0800
Subject: [PATCH] Add loading animation for statistics display in App component

---
 src/App.css | 10 ++++++++
 src/App.tsx | 69 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index b5dab76..d4ce642 100644
--- a/src/App.css
+++ b/src/App.css
@@ -524,3 +524,13 @@
 .chat-feed::-webkit-scrollbar-thumb:hover {
   background: var(--accent-hover);
 }
+
+/* Loading Animation */
+@keyframes loading-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
index 1dc7f02..9d19c99 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -33,6 +33,7 @@ function App() {
     totalPlayTime: 0,
     totalKills: 0
   })
+  const [loading, setLoading] = useState(true)
   const [recentChats, setRecentChats] = useState<ChatMessage[]>([])
   const [topPlayers, setTopPlayers] = useState<TopPlayer[]>([])
 
@@ -77,8 +78,12 @@ function App() {
           totalPlayTime: playTime.totalPlayTime || 0,
           totalKills: kills.totalKillCount || 0
         })
+        setLoading(false)
+      })
+      .catch(error => {
+        console.error('Error fetching stats:', error)
+        setLoading(false)
       })
-      .catch(error => console.error('Error fetching stats:', error))
   }, [])
 
   // Fetch recent chat messages (limit to top 5)
@@ -188,22 +193,74 @@ function App() {
         <div className="stats-container">
           <div className="stat-card">
             <div className="stat-icon">👥</div>
-            <div className="stat-number">{stats.totalPlayers.toLocaleString()}</div>
+            <div className="stat-number">
+              {loading ? (
+                <div style={{
+                  width: '60px',
+                  height: '40px',
+                  background: 'linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%)',
+                  backgroundSize: '200% 100%',
+                  animation: 'loading-shimmer 1.5s infinite',
+                  borderRadius: '4px'
+                }} />
+              ) : (
+                stats.totalPlayers.toLocaleString()
+              )}
+            </div>
             <div className="stat-label">{t('stats.totalPlayers')}</div>
           </div>
           <div className="stat-card">
-            <div className="stat-icon">�</div>
-            <div className="stat-number">{stats.totalConnects.toLocaleString()}</div>
+            <div className="stat-icon">🔗</div>
+            <div className="stat-number">
+              {loading ? (
+                <div style={{
+                  width: '60px',
+                  height: '40px',
+                  background: 'linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%)',
+                  backgroundSize: '200% 100%',
+                  animation: 'loading-shimmer 1.5s infinite',
+                  borderRadius: '4px'
+                }} />
+              ) : (
+                stats.totalConnects.toLocaleString()
+              )}
+            </div>
             <div className="stat-label">{t('stats.totalConnects')}</div>
           </div>
           <div className="stat-card">
             <div className="stat-icon">⏱️</div>
-            <div className="stat-number">{formatPlayTime(stats.totalPlayTime)}</div>
+            <div className="stat-number">
+              {loading ? (
+                <div style={{
+                  width: '80px',
+                  height: '40px',
+                  background: 'linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%)',
+                  backgroundSize: '200% 100%',
+                  animation: 'loading-shimmer 1.5s infinite',
+                  borderRadius: '4px'
+                }} />
+              ) : (
+                formatPlayTime(stats.totalPlayTime)
+              )}
+            </div>
             <div className="stat-label">{t('stats.totalPlayTime')}</div>
           </div>
           <div className="stat-card">
             <div className="stat-icon">🎯</div>
-            <div className="stat-number">{stats.totalKills.toLocaleString()}</div>
+            <div className="stat-number">
+              {loading ? (
+                <div style={{
+                  width: '60px',
+                  height: '40px',
+                  background: 'linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-color) 50%, var(--bg-secondary) 75%)',
+                  backgroundSize: '200% 100%',
+                  animation: 'loading-shimmer 1.5s infinite',
+                  borderRadius: '4px'
+                }} />
+              ) : (
+                stats.totalKills.toLocaleString()
+              )}
+            </div>
             <div className="stat-label">{t('stats.totalKills')}</div>
           </div>
         </div>