diff --git a/frontend/src/components/sidebar/ApiStatusIndicator.tsx b/frontend/src/components/sidebar/ApiStatusIndicator.tsx index 5bd99e76..edc0c4a9 100644 --- a/frontend/src/components/sidebar/ApiStatusIndicator.tsx +++ b/frontend/src/components/sidebar/ApiStatusIndicator.tsx @@ -132,11 +132,6 @@ export default function ApiStatusIndicator() { // Only run API checks on API monitor page to avoid console errors on other pages const isApiMonitorPage = location.pathname === '/settings/api-monitor'; - - // Return null if not aws-admin account or not on API monitor page - if (!isAwsAdmin || !isApiMonitorPage) { - return null; - } const checkEndpoint = useCallback(async (path: string, method: string): Promise<'healthy' | 'warning' | 'error'> => { try { @@ -317,6 +312,11 @@ export default function ApiStatusIndicator() { }, [checkEndpoint]); useEffect(() => { + // Only run if aws-admin and on API monitor page + if (!isAwsAdmin || !isApiMonitorPage) { + return; + } + // Initial check checkAllGroups(); @@ -369,7 +369,7 @@ export default function ApiStatusIndicator() { window.removeEventListener('storage', handleStorageChange); window.removeEventListener('api-monitor-interval-changed', handleCustomStorageChange); }; - }, [checkAllGroups]); + }, [checkAllGroups, isAwsAdmin, isApiMonitorPage]); const getStatusColor = (isHealthy: boolean) => { if (isHealthy) { @@ -379,6 +379,12 @@ export default function ApiStatusIndicator() { } }; + // Return null if not aws-admin account or not on API monitor page + // This check must come AFTER all hooks are called + if (!isAwsAdmin || !isApiMonitorPage) { + return null; + } + if (groupStatuses.length === 0 && !isChecking) { return null; }