diff --git a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx
index b7e50a499..ff8297848 100644
--- a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx
+++ b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx
@@ -108,7 +108,7 @@ TablePaginationActions.propTypes = {
onPageChange: PropTypes.func.isRequired,
};
-const MonitorTable = ({ isAdmin, filter }) => {
+const MonitorTable = ({ isAdmin, filter, setLoading }) => {
const theme = useTheme();
const navigate = useNavigate();
const dispatch = useDispatch();
@@ -161,6 +161,7 @@ const MonitorTable = ({ isAdmin, filter }) => {
});
setMonitors(res?.data?.data?.monitors ?? []);
setMonitorCount(res?.data?.data?.monitorCount ?? 0);
+ setLoading(false);
} catch (error) {
logger.error(error);
}
diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx
index 9db0cbf9a..af439650b 100644
--- a/Client/src/Pages/Monitors/Home/index.jsx
+++ b/Client/src/Pages/Monitors/Home/index.jsx
@@ -4,7 +4,13 @@ import { useSelector, useDispatch } from "react-redux";
import { getUptimeMonitorsByTeamId } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
import { useNavigate } from "react-router-dom";
import { useTheme } from "@emotion/react";
-import { Box, Button, Stack, Typography } from "@mui/material";
+import {
+ Box,
+ Button,
+ CircularProgress,
+ Stack,
+ Typography,
+} from "@mui/material";
import PropTypes from "prop-types";
import SkeletonLayout from "./skeleton";
import Fallback from "./fallback";
@@ -21,12 +27,19 @@ const Monitors = ({ isAdmin }) => {
const monitorState = useSelector((state) => state.uptimeMonitors);
const authState = useSelector((state) => state.auth);
const [search, setSearch] = useState("");
+ const [isSearching, setIsSearching] = useState("");
const dispatch = useDispatch({});
const debouncedFilter = useDebounce(search, 500);
+ const handleSearch = (value) => {
+ setIsSearching(true);
+ setSearch(value);
+ };
+
useEffect(() => {
dispatch(getUptimeMonitorsByTeamId(authState.authToken));
}, [authState.authToken, dispatch]);
+
let loading =
monitorState?.isLoading &&
monitorState?.monitorsSummary?.monitors?.length === 0;
@@ -124,11 +137,47 @@ const Monitors = ({ isAdmin }) => {
options={monitorState?.monitorsSummary.monitors}
filteredBy="name"
value={search}
- handleInputChange={setSearch}
+ handleInputChange={handleSearch}
/>
-
+
+ {isSearching && (
+ <>
+
+
+
+
+ >
+ )}
+
+
>
)}