diff --git a/Client/src/Components/Inputs/Search/index.jsx b/Client/src/Components/Inputs/Search/index.jsx
index 9a1995726..2491020f0 100644
--- a/Client/src/Components/Inputs/Search/index.jsx
+++ b/Client/src/Components/Inputs/Search/index.jsx
@@ -132,6 +132,7 @@ const Search = ({
}
return filtered;
}}
+ getOptionKey={(option) => option.id}
renderOption={(props, option) => {
const { key, ...optionProps } = props;
return (
diff --git a/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx b/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx
index faca0c612..d79f4e270 100644
--- a/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx
+++ b/Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx
@@ -13,10 +13,47 @@ import ActionsMenu from "../actionsMenu";
// Utils
import { useTheme } from "@emotion/react";
import useUtils from "../../utils";
-import { memo } from "react";
+import { useState, memo, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import "../index.css";
import PropTypes from "prop-types";
+import { useTraceUpdate } from "../../../../Hooks/useTraceUpdate";
+
+const SearchComponent = memo(
+ ({ monitors, debouncedSearch, onSearchChange, setIsSearching }) => {
+ const [localSearch, setLocalSearch] = useState(debouncedSearch);
+ const handleSearch = useCallback(
+ (value) => {
+ setIsSearching(true);
+ setLocalSearch(value);
+ onSearchChange(value);
+ },
+ [onSearchChange, setIsSearching]
+ );
+
+ return (
+
+
+
+ );
+ }
+);
+SearchComponent.displayName = "SearchComponent";
+SearchComponent.propTypes = {
+ monitors: PropTypes.array,
+ debouncedSearch: PropTypes.string,
+ onSearchChange: PropTypes.func,
+ setIsSearching: PropTypes.func,
+};
/**
* UptimeDataTable displays a table of uptime monitors with sorting, searching, and action capabilities
@@ -55,7 +92,7 @@ const UptimeDataTable = ({
monitorCount,
sort,
setSort,
- search,
+ debouncedSearch,
setSearch,
isSearching,
setIsSearching,
@@ -67,11 +104,6 @@ const UptimeDataTable = ({
const theme = useTheme();
const navigate = useNavigate();
- const handleSearch = (value) => {
- setIsSearching(true);
- setSearch(value);
- };
-
const handleSort = (field) => {
let order = "";
if (sort.field !== field) {
@@ -202,18 +234,13 @@ const UptimeDataTable = ({
>
{monitorCount}
-
-
-
+
+
{(isSearching || isLoading) && (
@@ -280,7 +307,7 @@ UptimeDataTable.propTypes = {
order: PropTypes.oneOf(["asc", "desc"]),
}),
setSort: PropTypes.func,
- search: PropTypes.string,
+ debouncedSearch: PropTypes.string,
setSearch: PropTypes.func,
isSearching: PropTypes.bool,
setIsSearching: PropTypes.func,
diff --git a/Client/src/Pages/Uptime/Home/index.jsx b/Client/src/Pages/Uptime/Home/index.jsx
index 449c7dee3..4c5656b2c 100644
--- a/Client/src/Pages/Uptime/Home/index.jsx
+++ b/Client/src/Pages/Uptime/Home/index.jsx
@@ -134,9 +134,9 @@ const UptimeMonitors = () => {
setPage(0);
};
- const triggerUpdate = () => {
+ const triggerUpdate = useCallback(() => {
setMonitorUpdateTrigger((prev) => !prev);
- };
+ }, []);
const totalMonitors = monitorsSummary?.totalMonitors ?? 0;
const hasMonitors = monitorsSummary?.totalMonitors ?? 0;
const canAddMonitor = isAdmin && hasMonitors;
@@ -203,7 +203,7 @@ const UptimeMonitors = () => {
monitorCount={totalMonitors}
sort={sort}
setSort={setSort}
- search={search}
+ debouncedSearch={debouncedFilter}
setSearch={setSearch}
isSearching={isSearching}
setIsSearching={setIsSearching}