Performance: Improve Dashboard cleanup to prevent slowdown on other pages

Performance Fix - Dashboard Cleanup:
Dashboard makes 13 API calls on load and auto-refreshes every 60 seconds
When user navigates away, these operations need proper cleanup

Issue:
- User visits Dashboard → 13 API calls start loading
- User quickly navigates to Backend Management
- Dashboard cleanup incomplete, API calls still pending
- Backend Management loads slower due to backend busy with Dashboard requests

Fix Applied:
1. Added loading state reset in useEffect cleanup (Line 467-472)
   - setLoading(false)
   - setInitialLoad(false)
   - Only runs on component unmount
   - Does NOT affect Dashboard performance while in use

2. Enhanced interval cleanup documentation (Line 559-563)
   - Already clears auto-refresh interval
   - Added comment about preventing background fetches

Dashboard API Calls (13 total):
  Sequential: 7 calls (overview, agents, frontends, backends, stats, health, slowest)
  Parallel: 5 timeseries calls
  Separate: 1 heatmap (24h data)

Performance Impact Analysis:
  Dashboard in use: ZERO impact (cleanup only runs on unmount)
  Dashboard to other pages: FASTER (loading states cleared)
  Other pages: FASTER (Dashboard not blocking backend)

Risk: NONE - Only cleanup code, doesn't change functionality
This commit is contained in:
taylanbakircioglu
2025-11-07 11:51:15 +03:00
parent e7f2bc30aa
commit e2f9d6b90a
+9 -1
View File
@@ -465,6 +465,10 @@ const DashboardV2 = () => {
return () => {
isMounted = false;
// CRITICAL FIX: Reset loading states when component unmounts
// This prevents Dashboard's heavy load from affecting other pages
setLoading(false);
setInitialLoad(false);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedCluster?.id]); // Only depend on cluster ID change
@@ -552,7 +556,11 @@ const DashboardV2 = () => {
}
}, 60000); // 60 seconds
return () => clearInterval(interval);
return () => {
clearInterval(interval);
// CRITICAL FIX: Cleanup on unmount to prevent background fetches
// Dashboard makes 13 API calls, cleanup ensures they stop when user leaves
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedCluster?.id, initialLoad, activeTab]);