From 2eeb8b6e4edcf5603b97bdd1915d798e4138e004 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 29 Jan 2025 15:04:48 -0800
Subject: [PATCH] Changed NetworkErrorFallback to a generic callback

---
 .../GenericFallback/NetworkError.jsx          | 20 +++++++++++++++++++
 .../index.jsx                                 | 17 +++++-----------
 2 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 Client/src/Components/GenericFallback/NetworkError.jsx
 rename Client/src/Components/{NetworkErrorFallback => GenericFallback}/index.jsx (81%)

diff --git a/Client/src/Components/GenericFallback/NetworkError.jsx b/Client/src/Components/GenericFallback/NetworkError.jsx
new file mode 100644
index 000000000..b26037a57
--- /dev/null
+++ b/Client/src/Components/GenericFallback/NetworkError.jsx
@@ -0,0 +1,20 @@
+import { Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+const NetworkError = () => {
+	const theme = useTheme();
+	return (
+		<>
+			<Typography
+				variant="h1"
+				marginY={theme.spacing(4)}
+				color={theme.palette.primary.contrastTextTertiary}
+			>
+				Network error
+			</Typography>
+			<Typography>Please check your connection</Typography>
+		</>
+	);
+};
+
+export default NetworkError;
diff --git a/Client/src/Components/NetworkErrorFallback/index.jsx b/Client/src/Components/GenericFallback/index.jsx
similarity index 81%
rename from Client/src/Components/NetworkErrorFallback/index.jsx
rename to Client/src/Components/GenericFallback/index.jsx
index 1039b256b..af9ed2ea4 100644
--- a/Client/src/Components/NetworkErrorFallback/index.jsx
+++ b/Client/src/Components/GenericFallback/index.jsx
@@ -1,5 +1,5 @@
 import { useTheme } from "@emotion/react";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import Skeleton from "../../assets/Images/create-placeholder.svg?react";
 import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
@@ -11,13 +11,13 @@ import { useSelector } from "react-redux";
  * @returns {JSX.Element} The rendered fallback UI.
  */
 
-const NetworkErrorFallback = () => {
+const GenericFallback = ({ children }) => {
 	const theme = useTheme();
 	const mode = useSelector((state) => state.ui.mode);
 
 	return (
 		<Box
-			className="page-speed"
+			padding={theme.spacing(16)}
 			position="relative"
 			border={1}
 			borderColor={theme.palette.primary.lowContrast}
@@ -68,18 +68,11 @@ const NetworkErrorFallback = () => {
 					maxWidth={"300px"}
 					zIndex={1}
 				>
-					<Typography
-						variant="h1"
-						marginY={theme.spacing(4)}
-						color={theme.palette.primary.contrastTextTertiary}
-					>
-						Network error
-					</Typography>
-					<Typography>Please check your connection</Typography>
+					{children}
 				</Stack>
 			</Stack>
 		</Box>
 	);
 };
 
-export default NetworkErrorFallback;
+export default GenericFallback;