This PR extends the excellent foundation laid by the initial server stats layout improvements in PR #729, adding essential performance optimizations, UX consistency improvements, and animations.
Problems Addressed:
🚨Performance Issues:
Server stats were always loaded, even when toggle was hidden, causing unnecessary API calls
API calls to offline/disabled servers resulted in 500 errors flooding the console
Missing lazy loading can led to poor performance
🎨UX Inconsistencies:
Disabled servers disappeared completely instead of showing consistent card layout
Toggle button height didn't match other dashboard buttons (export toml)
No visual feedback for different server states (Ok, NotOk, Disabled)
Solutions Implemented:
⚡Performance Optimizations:
Smart API calls: Only fetch stats from available servers (state === Ok)
Lazy loading: Stats only load when toggle is enabled
Memoization: Expensive calculations cached with useMemo
Increased polling interval: 15s instead of default to reduce server load
🎯UX Consistency:
Three-state visual system:
✅Ok servers: Show live stats
⚠️NotOk servers: Show "Unreachable" overlay
🚫Disabled servers: Show "Disabled" overlay
Consistent layout: All server cards maintain same dimensions regardless of state
1000ms linear transitions for gentle expand/collapse effects
Coordinated animations: Height, opacity, and padding transition together
Overflow handling: Clean animations without content jumping
Technical Details:
Modified Files:
stats-mini.tsx: Added enabled prop, server availability checks, consistent overlays
dashboard.tsx: Toggle implementation, conditional rendering and animations
Impact:
🚀Better Performance: No more unnecessary API calls or console errors
🎨Consistent UX: All server states handled gracefully with appropriate visual feedback
⚡Smooth Interactions: Gentle animations improve user experience
🧹Clean Code: Clear separation of concerns and maintainable structure
Testing:
✅ All server states render correctly
✅ No console errors from offline servers
✅ Toggle animations
✅ Performance improved with lazy loading
✅ Design consistency maintained
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/moghtech/komodo/pull/746
**Author:** [@MP-Tool](https://github.com/MP-Tool)
**Created:** 8/19/2025
**Status:** ✅ Merged
**Merged:** 8/20/2025
**Merged by:** [@mbecker20](https://github.com/mbecker20)
**Base:** `1.19.1` ← **Head:** `ux/mini-stats`
---
### 📝 Commits (6)
- [`53425ae`](https://github.com/moghtech/komodo/commit/53425aef0766e0c18d11e082c48c4215d3b14a65) Improve the layout of server mini stats in the dashboard.
- [`6fade59`](https://github.com/moghtech/komodo/commit/6fade5957b6d67d451e03c46ff58e2bb953fde51) feat: optimize dashboard server stats with lazy loading and smart server availability checks
- [`0e168ab`](https://github.com/moghtech/komodo/commit/0e168abf0189fbb5443ccc4c9bf758564af9bd06) fix: show disabled servers with overlay instead of hiding component
- [`1f9cf23`](https://github.com/moghtech/komodo/commit/1f9cf2360052e638d5cc5a8ec8d9d55c6aaed366) fix: show button height
- [`97fbf73`](https://github.com/moghtech/komodo/commit/97fbf739e325d6a9982fe4fc765d38b4efcbac80) feat: add enhance card animations
- [`b0a280d`](https://github.com/moghtech/komodo/commit/b0a280d5fb5840711895b53e2d0add15bf0c447c) cleanup
### 📊 Changes
**2 files changed** (+65 additions, -31 deletions)
<details>
<summary>View changed files</summary>
📝 `frontend/src/components/resources/server/stats-mini.tsx` (+53 -23)
📝 `frontend/src/pages/home/dashboard.tsx` (+12 -8)
</details>
### 📄 Description
# Enhanced Server Stats Dashboard with Performance Optimizations
## Building upon PR #729:
This PR extends the excellent foundation laid by the initial server stats layout improvements in [PR #729](https://github.com/MP-Tool/komodo/commit/53425aef0766e0c18d11e082c48c4215d3b14a65), adding essential performance optimizations, UX consistency improvements, and animations.
## Problems Addressed:
### 🚨 **Performance Issues:**
- Server stats were always loaded, even when toggle was hidden, causing unnecessary API calls
- API calls to offline/disabled servers resulted in 500 errors flooding the console
- Missing lazy loading can led to poor performance
### 🎨 **UX Inconsistencies:**
- Disabled servers disappeared completely instead of showing consistent card layout
- Toggle button height didn't match other dashboard buttons (export toml)
- No visual feedback for different server states (Ok, NotOk, Disabled)
## Solutions Implemented:
<img width="2900" height="1116" alt="light-mode" src="https://github.com/user-attachments/assets/0169f1b9-c482-4b59-947c-e11a03845957" />
<img width="2900" height="1116" alt="dark-mode" src="https://github.com/user-attachments/assets/81efd9df-cc7e-494e-ae2e-890e075a0d10" />
### ⚡ **Performance Optimizations:**
- **Smart API calls**: Only fetch stats from available servers (state === `Ok`)
- **Lazy loading**: Stats only load when toggle is enabled
- **Memoization**: Expensive calculations cached with `useMemo`
- **Increased polling interval**: 15s instead of default to reduce server load
### 🎯 **UX Consistency:**
- **Three-state visual system**:
- ✅ `Ok` servers: Show live stats
- ⚠️ `NotOk` servers: Show "Unreachable" overlay
- 🚫 `Disabled` servers: Show "Disabled" overlay
- **Consistent layout**: All server cards maintain same dimensions regardless of state
- **Button alignment**: Toggle button matches export button height
### ✨ **Animations:**
- **1000ms linear transitions** for gentle expand/collapse effects
- **Coordinated animations**: Height, opacity, and padding transition together
- **Overflow handling**: Clean animations without content jumping
## Technical Details:
### Modified Files:
- **`stats-mini.tsx`**: Added `enabled` prop, server availability checks, consistent overlays
- **`dashboard.tsx`**: Toggle implementation, conditional rendering and animations
## Impact:
- 🚀 **Better Performance**: No more unnecessary API calls or console errors
- 🎨 **Consistent UX**: All server states handled gracefully with appropriate visual feedback
- ⚡ **Smooth Interactions**: Gentle animations improve user experience
- 🧹 **Clean Code**: Clear separation of concerns and maintainable structure
## Testing:
- ✅ All server states render correctly
- ✅ No console errors from offline servers
- ✅ Toggle animations
- ✅ Performance improved with lazy loading
- ✅ Design consistency maintained
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/moghtech/komodo/pull/746
Author: @MP-Tool
Created: 8/19/2025
Status: ✅ Merged
Merged: 8/20/2025
Merged by: @mbecker20
Base:
1.19.1← Head:ux/mini-stats📝 Commits (6)
53425aeImprove the layout of server mini stats in the dashboard.6fade59feat: optimize dashboard server stats with lazy loading and smart server availability checks0e168abfix: show disabled servers with overlay instead of hiding component1f9cf23fix: show button height97fbf73feat: add enhance card animationsb0a280dcleanup📊 Changes
2 files changed (+65 additions, -31 deletions)
View changed files
📝
frontend/src/components/resources/server/stats-mini.tsx(+53 -23)📝
frontend/src/pages/home/dashboard.tsx(+12 -8)📄 Description
Enhanced Server Stats Dashboard with Performance Optimizations
Building upon PR #729:
This PR extends the excellent foundation laid by the initial server stats layout improvements in PR #729, adding essential performance optimizations, UX consistency improvements, and animations.
Problems Addressed:
🚨 Performance Issues:
🎨 UX Inconsistencies:
Solutions Implemented:
⚡ Performance Optimizations:
Ok)useMemo🎯 UX Consistency:
Okservers: Show live statsNotOkservers: Show "Unreachable" overlayDisabledservers: Show "Disabled" overlay✨ Animations:
Technical Details:
Modified Files:
stats-mini.tsx: Addedenabledprop, server availability checks, consistent overlaysdashboard.tsx: Toggle implementation, conditional rendering and animationsImpact:
Testing:
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.