Debounce global search IO-530

client/src/components/global-search/global-search.component.jsx

@@ -1,12 +1,13 @@
 import { useLazyQuery } from "@apollo/react-hooks";
 import { AutoComplete, Input } from "antd";
+import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import AlertComponent from "../alert/alert.component";
+
 export default function GlobalSearch() {
   const { t } = useTranslation();
 
@@ -14,27 +15,18 @@ export default function GlobalSearch() {
     GLOBAL_SEARCH_QUERY
   );
 
-  const handleSearch = (searchTerm) => {
+  const executeSearch = (v) => {
-    logImEXEvent("global_search", { term: searchTerm });
+    callSearch(v);
+  };
+  const debouncedExecuteSearch = _.debounce(executeSearch, 500);
 
-    if (searchTerm.length > 0)
+  const handleSearch = (value) => {
-      callSearch({ variables: { search: searchTerm } });
+    if (value && value !== "")
+      debouncedExecuteSearch({ variables: { search: value } });
   };
 
   const renderTitle = (title) => {
-    return (
+    return <span>{title}</span>;
-      <span>
-        {title}
-        <a
-          style={{ float: "right" }}
-          href="https://www.google.com/search?q=antd"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          more
-        </a>
-      </span>
-    );
   };
 
   const options = data
@@ -155,8 +147,9 @@ export default function GlobalSearch() {
         dropdownMatchSelectWidth={false}
         style={{ width: 200 }}
         options={options}
+        onSearch={handleSearch}
       >
-        <Input.Search loading={loading} onSearch={handleSearch} />
+        <Input.Search loading={loading} />
       </AutoComplete>
     </div>
   );

client/src/components/scoreboard-jobs-list/scoreboard-jobs-list.component.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Dropdown, Button, Table } from "antd";
+import { Dropdown, Button, Table, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import ScoreboardRemoveButton from "../scoreboard-remove-button/scorebard-remove-button.component";
@@ -42,10 +42,10 @@ export default function ScoreboardJobsList({ scoreBoardlist }) {
       dataIndex: "actions",
       key: "actions",
       render: (text, record) => (
-        <div>
+        <Space>
           <ScoreboardEntryEdit entry={record} style={{ zIndex: 15 }} />
           <ScoreboardRemoveButton scoreboardId={record.id} />
-        </div>
+        </Space>
       ),
     },
   ];