diff --git a/src/components/Tables/TableGrid/TableGrid.tsx b/src/components/Tables/TableGrid/TableGrid.tsx index 20d3b774b..bb25d4f04 100644 --- a/src/components/Tables/TableGrid/TableGrid.tsx +++ b/src/components/Tables/TableGrid/TableGrid.tsx @@ -31,7 +31,7 @@ export default function TableGrid({ {sectionName} diff --git a/src/components/Tables/TableList/TableList.tsx b/src/components/Tables/TableList/TableList.tsx index 629111370..61ef82c00 100644 --- a/src/components/Tables/TableList/TableList.tsx +++ b/src/components/Tables/TableList/TableList.tsx @@ -47,14 +47,14 @@ export default function TableList({ {sectionName} - + {tableItems} diff --git a/src/pages/TablesPage.tsx b/src/pages/TablesPage.tsx index 0e70b17ab..6ad6a6f55 100644 --- a/src/pages/TablesPage.tsx +++ b/src/pages/TablesPage.tsx @@ -1,5 +1,5 @@ import { useAtom, useSetAtom } from "jotai"; -import { find, groupBy, sortBy } from "lodash-es"; +import { find, groupBy, sortBy, debounce } from "lodash-es"; import { Link } from "react-router-dom"; import { @@ -64,6 +64,9 @@ export default function TablesPage() { SEARCH_KEYS ); + // Debounce the handleQuery function with a delay of 300 milliseconds + const debouncedHandleQuery = debounce((value) => handleQuery(value), 300); + const favorites = Array.isArray(userSettings.favoriteTables) ? userSettings.favoriteTables : []; @@ -183,7 +186,7 @@ export default function TablesPage() { handleQuery(e.target.value)} + onChange={(e) => debouncedHandleQuery(e.target.value)} paperSx={{ maxWidth: (theme) => ({ md: theme.breakpoints.values.sm - 48 * 4,