From 1a198c28ee2a3e350c5754e07a49ede8d185df3e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 16 Jun 2025 11:13:28 +0800
Subject: [PATCH 1/2] use universal details header in PageSpeed page

---
 client/src/Pages/PageSpeed/Details/index.jsx | 30 +++++++++++++-------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/client/src/Pages/PageSpeed/Details/index.jsx b/client/src/Pages/PageSpeed/Details/index.jsx
index e8afcf8c8..8fa7872db 100644
--- a/client/src/Pages/PageSpeed/Details/index.jsx
+++ b/client/src/Pages/PageSpeed/Details/index.jsx
@@ -4,6 +4,7 @@ import Breadcrumbs from "../../../Components/Breadcrumbs";
 import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import MonitorStatusHeader from "../../../Components/MonitorStatusHeader";
 import PageSpeedStatusBoxes from "./Components/PageSpeedStatusBoxes";
+import MonitorDetailsControlHeader from "../../../Components/MonitorDetailsControlHeader";
 import PageSpeedAreaChart from "./Components/PageSpeedAreaChart";
 import PerformanceReport from "./Components/PerformanceReport";
 import GenericFallback from "../../../Components/GenericFallback";
@@ -27,6 +28,15 @@ const PageSpeedDetails = () => {
 	const isAdmin = useIsAdmin();
 	const { monitorId } = useParams();
 
+	// Local state
+	const [metrics, setMetrics] = useState({
+		accessibility: true,
+		bestPractices: true,
+		performance: true,
+		seo: true,
+	});
+	const [trigger, setTrigger] = useState(false);
+	// Network
 	const [monitor, audits, isLoading, networkError] = useFetchStatsByMonitorId({
 		monitorId,
 		sortOrder: "desc",
@@ -34,13 +44,7 @@ const PageSpeedDetails = () => {
 		dateRange: "day",
 		numToDisplay: null,
 		normalize: null,
-	});
-
-	const [metrics, setMetrics] = useState({
-		accessibility: true,
-		bestPractices: true,
-		performance: true,
-		seo: true,
+		updateTrigger: trigger,
 	});
 
 	// Handlers
@@ -48,6 +52,9 @@ const PageSpeedDetails = () => {
 		setMetrics((prev) => ({ ...prev, [id]: !prev[id] }));
 	};
 
+	const triggerUpdate = () => {
+		setTrigger(!trigger);
+	};
 	if (networkError === true) {
 		return (
 			<GenericFallback>
@@ -68,10 +75,12 @@ const PageSpeedDetails = () => {
 		return (
 			<Stack gap={theme.spacing(10)}>
 				<Breadcrumbs list={BREADCRUMBS} />
-				<MonitorStatusHeader
+				<MonitorDetailsControlHeader
 					path={"pagespeed"}
+					isLoading={isLoading}
 					isAdmin={isAdmin}
 					monitor={monitor}
+					triggerUpdate={triggerUpdate}
 				/>
 				<GenericFallback>
 					<Typography>{t("distributedUptimeDetailsNoMonitorHistory")}</Typography>
@@ -83,11 +92,12 @@ const PageSpeedDetails = () => {
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
-			<MonitorStatusHeader
+			<MonitorDetailsControlHeader
 				path={"pagespeed"}
+				isLoading={isLoading}
 				isAdmin={isAdmin}
-				shouldRender={!isLoading}
 				monitor={monitor}
+				triggerUpdate={triggerUpdate}
 			/>
 			<PageSpeedStatusBoxes
 				shouldRender={!isLoading}

From 90a5fe946ad48514868752db1fa5ce93cd2898e2 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 16 Jun 2025 11:13:45 +0800
Subject: [PATCH 2/2] add update trigger prop

---
 client/src/Hooks/monitorHooks.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/Hooks/monitorHooks.js b/client/src/Hooks/monitorHooks.js
index d88132dae..751899b9a 100644
--- a/client/src/Hooks/monitorHooks.js
+++ b/client/src/Hooks/monitorHooks.js
@@ -170,6 +170,7 @@ const useFetchStatsByMonitorId = ({
 	dateRange,
 	numToDisplay,
 	normalize,
+	updateTrigger,
 }) => {
 	const [monitor, setMonitor] = useState(undefined);
 	const [audits, setAudits] = useState(undefined);
@@ -197,7 +198,7 @@ const useFetchStatsByMonitorId = ({
 			}
 		};
 		fetchMonitor();
-	}, [monitorId, dateRange, numToDisplay, normalize, sortOrder, limit]);
+	}, [monitorId, dateRange, numToDisplay, normalize, sortOrder, limit, updateTrigger]);
 	return [monitor, audits, isLoading, networkError];
 };