Add skeletons and loading conditions

Client/src/Pages/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx

@@ -1,13 +1,20 @@
 import ChartBox from "../../../../../Components/Charts/ChartBox";
 import AreaChart from "../Charts/AreaChart";
 import AreaChartLegend from "../Charts/AreaChartLegend";
+import SkeletonLayout from "./skeleton";
 import ScoreIcon from "../../../../../assets/icons/monitor-graph-line.svg?react";
 import { Stack } from "@mui/material";
+import PropTypes from "prop-types";
 
 import { useTheme } from "@emotion/react";
 
 const PageSpeedAreaChart = ({ shouldRender, monitor, metrics, handleMetrics }) => {
 	const theme = useTheme();
+
+	if (!shouldRender) {
+		return <SkeletonLayout />;
+	}
+
 	if (typeof monitor === "undefined") {
 		return null;
 	}
@@ -42,4 +49,11 @@ const PageSpeedAreaChart = ({ shouldRender, monitor, metrics, handleMetrics }) =
 	);
 };
 
+PageSpeedAreaChart.propTypes = {
+	shouldRender: PropTypes.bool,
+	monitor: PropTypes.object,
+	metrics: PropTypes.object,
+	handleMetrics: PropTypes.func,
+};
+
 export default PageSpeedAreaChart;

Client/src/Pages/PageSpeed/Details/Components/PageSpeedAreaChart/skeleton.jsx

@@ -0,0 +1,17 @@
+import { Box, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Box
+			height={"100%"}
+			width={"100%"}
+		>
+			<Skeleton
+				height={"100%"}
+				width={"100%"}
+			/>
+		</Box>
+	);
+};
+
+export default SkeletonLayout;

Client/src/Pages/PageSpeed/Details/Components/PerformanceReport/index.jsx

@@ -4,9 +4,19 @@ import PieChart from "../Charts/PieChart";
 import { Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import PieChartLegend from "../Charts/PieChartLegend";
-
-const PerformanceReport = ({ audits }) => {
+import SkeletonLayout from "./skeleton";
+const PerformanceReport = ({ shouldRender, audits }) => {
+	console.log("shouldRender", shouldRender);
 	const theme = useTheme();
+
+	if (!shouldRender) {
+		return <SkeletonLayout />;
+	}
+
+	if (typeof audits === "undefined") {
+		return null;
+	}
+
 	return (
 		<ChartBox
 			icon={<PerformanceIcon />}

Client/src/Pages/PageSpeed/Details/Components/PerformanceReport/skeleton.jsx

@@ -0,0 +1,17 @@
+import { Box, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Box
+			height={"100%"}
+			width={"100%"}
+		>
+			<Skeleton
+				height={"100%"}
+				width={"100%"}
+			/>
+		</Box>
+	);
+};
+
+export default SkeletonLayout;

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -44,14 +44,6 @@ const PageSpeedDetails = () => {
 		setMetrics((prev) => ({ ...prev, [id]: !prev[id] }));
 	};
 
-	if (isLoading) {
-		return "funk";
-	}
-
-	if (typeof audits === "undefined") {
-		return "No Data";
-	}
-
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
@@ -76,7 +68,10 @@ const PageSpeedDetails = () => {
 				metrics={metrics}
 				handleMetrics={handleMetrics}
 			/>
-			<PerformanceReport audits={audits} />
+			<PerformanceReport
+				shouldRender={!isLoading}
+				audits={audits}
+			/>
 		</Stack>
 	);
 };