CiallooWeb/www.cialloo.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading animation for statistics display in App component

Browse Source
This commit is contained in:
cialloo
2025-10-05 07:58:00 +08:00
parent 18483c8978
commit d72b6341a5
2 changed files with 73 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.css
View File

@@ -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;
}
}

69
src/App.tsx
View File

@@ -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"><EFBFBD></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>