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 && ( + <> + + + + + + )} + + )}