Fix: Re-render of unrelated UI Components

client/src/Components/MonitorCreateHeader/index.jsx

@@ -1,14 +1,13 @@
 import { Stack, Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
-import SkeletonLayout from "./skeleton";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
 
 const CreateMonitorHeader = ({
 	isAdmin,
 	label = "Create new",
-	shouldRender = true,
+	isLoading = true,
 	path,
 	bulkPath,
 }) => {
@@ -17,7 +16,6 @@ const CreateMonitorHeader = ({
 	const theme = useTheme();
 
 	if (!isAdmin) return null;
-	if (!shouldRender) return <SkeletonLayout />;
 
 	return (
 		<Stack
@@ -27,6 +25,7 @@ const CreateMonitorHeader = ({
 			gap={theme.spacing(6)}
 		>
 			<Button
+				loading={isLoading}
 				variant="contained"
 				color="accent"
 				onClick={() => navigate(path)}
@@ -35,6 +34,7 @@ const CreateMonitorHeader = ({
 			</Button>
 			{bulkPath && (
 				<Button
+					loading={isLoading}
 					variant="contained"
 					color="accent"
 					onClick={() => {
@@ -52,7 +52,7 @@ export default CreateMonitorHeader;
 
 CreateMonitorHeader.propTypes = {
 	isAdmin: PropTypes.bool.isRequired,
-	shouldRender: PropTypes.bool,
+	isLoading: PropTypes.bool,
 	path: PropTypes.string.isRequired,
 	label: PropTypes.string,
 	bulkPath: PropTypes.string,

client/src/Pages/Uptime/Monitors/index.jsx

@@ -146,7 +146,7 @@ const UptimeMonitors = () => {
 		monitorUpdateTrigger,
 	});
 
-	const isLoading = monitorsWithSummaryIsLoading;
+	const isLoading = monitorsWithSummaryIsLoading || monitorsWithChecksIsLoading;
 	if (networkError) {
 		return (
 			<GenericFallback>
@@ -189,7 +189,7 @@ const UptimeMonitors = () => {
 			<Breadcrumbs list={BREADCRUMBS} />
 			<CreateMonitorHeader
 				isAdmin={isAdmin}
-				shouldRender={!isLoading}
+				isLoading={isLoading}
 				path="/uptime/create"
 				bulkPath="/uptime/bulk-import"
 			/>