Global search improvement.

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

@@ -1,9 +1,10 @@
 import { useLazyQuery } from "@apollo/client";
+import { LoadingOutlined } from "@ant-design/icons";
 import { AutoComplete, Divider, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
@@ -12,8 +13,9 @@ import OwnerNameDisplay, {
 } from "../owner-name-display/owner-name-display.component";
 export default function GlobalSearch() {
   const { t } = useTranslation();
-
-  const [callSearch, { error, data }] = useLazyQuery(GLOBAL_SEARCH_QUERY);
+  const history = useHistory();
+  const [callSearch, { loading, error, data }] =
+    useLazyQuery(GLOBAL_SEARCH_QUERY);
 
   const executeSearch = (v) => {
     if (v && v.variables.search && v.variables.search !== "") callSearch(v);
@@ -171,8 +173,13 @@ export default function GlobalSearch() {
     <AutoComplete
       options={options}
       onSearch={handleSearch}
+      suffixIcon={loading && <LoadingOutlined spin />}
+      defaultActiveFirstOption
       placeholder={t("general.labels.globalsearch")}
       allowClear
+      onSelect={(val, opt) => {
+        history.push(opt.label.props.to);
+      }}
     ></AutoComplete>
   );
 }