From f218b6059157d1669ccd29a3e36114dc5a99da6f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 31 Jan 2025 13:45:07 -0800
Subject: [PATCH] fix uptime chart legends, set initial loading state to true
 to avoid extra render

---
 .../Details/Components/ChartBoxes/index.jsx   | 41 ++++++++++---------
 .../Uptime/Details/Hooks/useMonitorFetch.jsx  |  3 +-
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx b/Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
index aa40442a9..77fffd497 100644
--- a/Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
+++ b/Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx
@@ -41,6 +41,7 @@ const ChartBoxes = ({
 				header="Uptime"
 			>
 				<Stack
+					width={"100%"}
 					justifyContent="space-between"
 					direction="row"
 				>
@@ -93,26 +94,28 @@ const ChartBoxes = ({
 				icon={<IncidentsIcon />}
 				header="Incidents"
 			>
-				<Box position="relative">
-					<Typography component="span">
-						{hoveredIncidentsData !== null
-							? hoveredIncidentsData.totalChecks
-							: (monitor?.groupedDownChecks?.reduce((count, checkGroup) => {
-									return count + checkGroup.totalChecks;
-								}, 0) ?? 0)}
-					</Typography>
-					{hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && (
-						<Typography
-							component="h5"
-							position="absolute"
-							top="100%"
-							fontSize={11}
-							color={theme.palette.primary.contrastTextTertiary}
-						>
-							{formatDateWithTz(hoveredIncidentsData._id, dateFormat, uiTimezone)}
+				<Stack width={"100%"}>
+					<Box position="relative">
+						<Typography component="span">
+							{hoveredIncidentsData !== null
+								? hoveredIncidentsData.totalChecks
+								: (monitor?.groupedDownChecks?.reduce((count, checkGroup) => {
+										return count + checkGroup.totalChecks;
+									}, 0) ?? 0)}
 						</Typography>
-					)}
-				</Box>
+						{hoveredIncidentsData !== null && hoveredIncidentsData.time !== null && (
+							<Typography
+								component="h5"
+								position="absolute"
+								top="100%"
+								fontSize={11}
+								color={theme.palette.primary.contrastTextTertiary}
+							>
+								{formatDateWithTz(hoveredIncidentsData._id, dateFormat, uiTimezone)}
+							</Typography>
+						)}
+					</Box>
+				</Stack>
 				<DownBarChart
 					monitor={monitor}
 					type={dateRange}
diff --git a/Client/src/Pages/Uptime/Details/Hooks/useMonitorFetch.jsx b/Client/src/Pages/Uptime/Details/Hooks/useMonitorFetch.jsx
index ca4643fd4..4b45b56fb 100644
--- a/Client/src/Pages/Uptime/Details/Hooks/useMonitorFetch.jsx
+++ b/Client/src/Pages/Uptime/Details/Hooks/useMonitorFetch.jsx
@@ -4,14 +4,13 @@ import { logger } from "../../../../Utils/Logger";
 import { useNavigate } from "react-router-dom";
 
 export const useMonitorFetch = ({ authToken, monitorId, dateRange }) => {
-	const [monitorIsLoading, setMonitorsIsLoading] = useState(false);
+	const [monitorIsLoading, setMonitorsIsLoading] = useState(true);
 	const [monitor, setMonitor] = useState(undefined);
 	const navigate = useNavigate();
 
 	useEffect(() => {
 		const fetchMonitors = async () => {
 			try {
-				setMonitorsIsLoading(true);
 				const res = await networkService.getUptimeDetailsById({
 					authToken: authToken,
 					monitorId: monitorId,