From 49c58ce2ae123548bf6d54a546c57dbe75f4470b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 31 Jan 2025 13:44:36 -0800
Subject: [PATCH] fix pagespeed loading states, add network error fallback

---
 .../Details/Hooks/useMonitorFetch.jsx          |  8 ++++----
 Client/src/Pages/PageSpeed/Details/index.jsx   | 18 +++++++++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Details/Hooks/useMonitorFetch.jsx b/Client/src/Pages/PageSpeed/Details/Hooks/useMonitorFetch.jsx
index 340d4cf5e..1d15f4a42 100644
--- a/Client/src/Pages/PageSpeed/Details/Hooks/useMonitorFetch.jsx
+++ b/Client/src/Pages/PageSpeed/Details/Hooks/useMonitorFetch.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { networkService } from "../../../../main";
-import { logger } from "../../../../Utils/Logger";
+import { createToast } from "../../../../Utils/toastUtils";
 import { useNavigate } from "react-router-dom";
 const useMonitorFetch = ({ authToken, monitorId }) => {
 	const navigate = useNavigate();
@@ -8,10 +8,10 @@ const useMonitorFetch = ({ authToken, monitorId }) => {
 	const [monitor, setMonitor] = useState(undefined);
 	const [audits, setAudits] = useState(undefined);
 	const [isLoading, setIsLoading] = useState(true);
+	const [networkError, setNetworkError] = useState(false);
 	useEffect(() => {
 		const fetchMonitor = async () => {
 			try {
-				setIsLoading(true);
 				const res = await networkService.getStatsByMonitorId({
 					authToken: authToken,
 					monitorId: monitorId,
@@ -24,8 +24,8 @@ const useMonitorFetch = ({ authToken, monitorId }) => {
 				setMonitor(res?.data?.data ?? undefined);
 				setAudits(res?.data?.data?.checks?.[0]?.audits ?? undefined);
 			} catch (error) {
-				logger.error(logger);
-				navigate("/not-found", { replace: true });
+				setNetworkError(true);
+				createToast({ body: error.message });
 			} finally {
 				setIsLoading(false);
 			}
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index c52c1c817..b2e593482 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -27,7 +27,7 @@ const PageSpeedDetails = () => {
 	const { monitorId } = useParams();
 	const { authToken } = useSelector((state) => state.auth);
 
-	const { monitor, audits, isLoading } = useMonitorFetch({
+	const { monitor, audits, isLoading, networkError } = useMonitorFetch({
 		authToken,
 		monitorId,
 	});
@@ -39,10 +39,26 @@ const PageSpeedDetails = () => {
 		seo: true,
 	});
 
+	// Handlers
 	const handleMetrics = (id) => {
 		setMetrics((prev) => ({ ...prev, [id]: !prev[id] }));
 	};
 
+	if (networkError === true) {
+		return (
+			<GenericFallback>
+				<Typography
+					variant="h1"
+					marginY={theme.spacing(4)}
+					color={theme.palette.primary.contrastTextTertiary}
+				>
+					Network error
+				</Typography>
+				<Typography>Please check your connection</Typography>
+			</GenericFallback>
+		);
+	}
+
 	// Empty view, displayed when loading is complete and there are no checks
 	if (!isLoading && monitor?.checks?.length === 0) {
 		return (