Fix(UI)#6445: Global Search no data placeholder removal (#6482)

openmetadata-ui/src/main/resources/ui/src/assets/svg/empty-img-default.svg

@@ -1,9 +0,0 @@
-<svg width="106" height="100" viewBox="0 0 106 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M44.6033 99.4926C69.237 99.4926 89.2066 95.7613 89.2066 91.1584C89.2066 86.5556 69.237 82.8242 44.6033 82.8242C19.9696 82.8242 0 86.5556 0 91.1584C0 95.7613 19.9696 99.4926 44.6033 99.4926Z" fill="#F5F5F7" fill-opacity="0.8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M80.2856 66.6734L64.5455 47.3017C63.7902 46.3899 62.6863 45.8379 61.5238 45.8379H27.6817C26.5198 45.8379 25.4159 46.3899 24.6606 47.3017L8.92114 66.6734V76.7938H80.2863V66.6734H80.2856Z" fill="#AEB8C2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2566 20.8359H66.9493C67.6473 20.8359 68.3166 21.1132 68.8102 21.6067C69.3037 22.1002 69.5809 22.7696 69.5809 23.4675V84.878C69.5809 85.576 69.3037 86.2453 68.8102 86.7388C68.3166 87.2324 67.6473 87.5096 66.9493 87.5096H22.2566C21.5586 87.5096 20.8893 87.2324 20.3958 86.7388C19.9023 86.2453 19.625 85.576 19.625 84.878V23.4675C19.625 22.7696 19.9023 22.1002 20.3958 21.6067C20.8893 21.1132 21.5586 20.8359 22.2566 20.8359V20.8359Z" fill="#F5F5F7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28.0776 27.3848H61.1283C61.4773 27.3848 61.812 27.5234 62.0587 27.7702C62.3055 28.0169 62.4441 28.3516 62.4441 28.7006V45.1196C62.4441 45.4686 62.3055 45.8033 62.0587 46.05C61.812 46.2968 61.4773 46.4354 61.1283 46.4354H28.0776C27.7287 46.4354 27.394 46.2968 27.1472 46.05C26.9005 45.8033 26.7619 45.4686 26.7619 45.1196V28.7006C26.7619 28.3516 26.9005 28.0169 27.1472 27.7702C27.394 27.5234 27.7287 27.3848 28.0776 27.3848V27.3848ZM28.25 53.5782H60.9559C61.3506 53.5782 61.7291 53.735 62.0082 54.0141C62.2873 54.2931 62.4441 54.6717 62.4441 55.0663C62.4441 55.461 62.2873 55.8395 62.0082 56.1186C61.7291 56.3977 61.3506 56.5545 60.9559 56.5545H28.25C27.8553 56.5545 27.4768 56.3977 27.1977 56.1186C26.9186 55.8395 26.7619 55.461 26.7619 55.0663C26.7619 54.6717 26.9186 54.2931 27.1977 54.0141C27.4768 53.735 27.8553 53.5782 28.25 53.5782V53.5782ZM28.25 61.317H60.9559C61.3507 61.317 61.7293 61.4738 62.0085 61.753C62.2876 62.0321 62.4444 62.4107 62.4444 62.8055C62.4444 63.2003 62.2876 63.5789 62.0085 63.858C61.7293 64.1372 61.3507 64.294 60.9559 64.294H28.25C27.8552 64.294 27.4766 64.1372 27.1975 63.858C26.9184 63.5789 26.7615 63.2003 26.7615 62.8055C26.7615 62.4107 26.9184 62.0321 27.1975 61.753C27.4766 61.4738 27.8552 61.317 28.25 61.317V61.317ZM80.1402 89.9367C79.6303 91.9571 77.8395 93.4631 75.7092 93.4631H13.4967C11.3665 93.4631 9.57567 91.9565 9.06646 89.9367C8.96934 89.5517 8.92029 89.1562 8.92041 88.7591V66.6756H26.2349C28.1474 66.6756 29.6888 68.2861 29.6888 70.2413V70.2677C29.6888 72.2223 31.248 73.8006 33.1605 73.8006H56.0454C57.9579 73.8006 59.5171 72.2078 59.5171 70.2525V70.2446C59.5171 68.2894 61.0586 66.6749 62.9711 66.6749H80.2855V88.7598C80.2855 89.1657 80.2349 89.5598 80.1402 89.9367V89.9367Z" fill="#DCE0E6"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M82.3164 21.9026L77.823 23.6461C77.7075 23.6909 77.5818 23.7023 77.4602 23.6789C77.3385 23.6555 77.226 23.5982 77.1355 23.5137C77.045 23.4292 76.9802 23.3208 76.9485 23.2011C76.9168 23.0813 76.9196 22.9551 76.9565 22.8368L78.2309 18.7533C76.5276 16.8164 75.5276 14.4546 75.5276 11.9059C75.5276 5.33026 82.1842 0 90.396 0C98.6059 0 105.263 5.33026 105.263 11.9059C105.263 18.4816 98.6065 23.8118 90.3954 23.8118C87.4164 23.8118 84.6427 23.1105 82.3164 21.9026Z" fill="#DCE0E6"/>
-<path d="M96.2528 14.0555C97.2879 14.0555 98.1271 13.2264 98.1271 12.2035C98.1271 11.1807 97.2879 10.3516 96.2528 10.3516C95.2176 10.3516 94.3784 11.1807 94.3784 12.2035C94.3784 13.2264 95.2176 14.0555 96.2528 14.0555Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M86.4132 13.8248H82.6646L84.5711 10.584L86.4132 13.8248ZM88.756 10.584H92.0356V13.8248H88.756V10.584Z" fill="white"/>
-</svg>

openmetadata-ui/src/main/resources/ui/src/components/GlobalSearchProvider/GlobalSearchProvider.tsx

@@ -41,6 +41,8 @@ const GlobalSearchProvider: FC<Props> = ({ children }: Props) => {
   const [visible, setVisible] = useState<boolean>(false);
   const [searchValue, setSearchValue] = useState<string>();
   const [suggestionSearch, setSuggestionSearch] = useState<string>('');
+  const [isSuggestionsLoading, setIsSuggestionsLoading] =
+    useState<boolean>(false);
 
   const handleCancel = () => {
     setSearchValue('');
@@ -68,6 +70,10 @@ const GlobalSearchProvider: FC<Props> = ({ children }: Props) => {
     debouncedOnChange,
   ]);
 
+  const handleIsSuggestionsLoading = (value: boolean) => {
+    setIsSuggestionsLoading(value);
+  };
+
   const searchHandler = (value: string) => {
     addToRecentSearched(value);
     history.push({
@@ -107,7 +113,7 @@ const GlobalSearchProvider: FC<Props> = ({ children }: Props) => {
         maskClosable
         bodyStyle={{
           padding: '20px',
-          height: '314px',
+          height: searchValue ? '314px' : '85px',
         }}
         closeIcon={<></>}
         footer={null}
@@ -116,6 +122,8 @@ const GlobalSearchProvider: FC<Props> = ({ children }: Props) => {
         width={650}
         onCancel={handleCancel}>
         <GlobalSearchSuggestions
+          handleIsSuggestionsLoading={handleIsSuggestionsLoading}
+          isSuggestionsLoading={isSuggestionsLoading}
           searchText={suggestionSearch}
           selectRef={selectRef}
           value={searchValue || ''}
@@ -124,6 +132,7 @@ const GlobalSearchProvider: FC<Props> = ({ children }: Props) => {
           onSearch={(newValue) => {
             debounceOnSearch(newValue);
             setSearchValue(newValue);
+            setIsSuggestionsLoading(true);
           }}
         />
       </Modal>

openmetadata-ui/src/main/resources/ui/src/components/GlobalSearchProvider/GlobalSearchSuggestions/GlobalSearchSuggestions.interface.ts

@@ -14,6 +14,8 @@
 import { BaseSelectRef } from 'rc-select';
 
 export interface GlobalSearchSuggestionsProp {
+  isSuggestionsLoading: boolean;
+  handleIsSuggestionsLoading: (value: boolean) => void;
   value: string;
   searchText: string;
   onOptionSelection: () => void;

openmetadata-ui/src/main/resources/ui/src/components/GlobalSearchProvider/GlobalSearchSuggestions/GlobalSearchSuggestions.tsx

@@ -11,11 +11,11 @@
  *  limitations under the License.
  */
 
-import { Select, Typography } from 'antd';
+import { Empty, Select } from 'antd';
 import { AxiosError, AxiosResponse } from 'axios';
+import { isEmpty } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-import { ReactComponent as NoDataFoundSVG } from '../../../assets/svg/empty-img-default.svg';
 import { getSuggestions } from '../../../axiosAPIs/miscAPI';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { FqnPart } from '../../../enums/entity.enum';
@@ -27,6 +27,7 @@ import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { getEntityLink } from '../../../utils/TableUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import CmdKIcon from '../../common/CmdKIcon/CmdKIcon.component';
+import Loader from '../../Loader/Loader';
 import {
   DashboardSource,
   GlobalSearchSuggestionsProp,
@@ -39,6 +40,8 @@ import {
 import './GlobalSearchSuggestions.less';
 
 const GlobalSearchSuggestions = ({
+  isSuggestionsLoading,
+  handleIsSuggestionsLoading,
   searchText,
   onOptionSelection,
   value,
@@ -275,6 +278,9 @@ const GlobalSearchSuggestions = ({
             err,
             jsonData['api-error-messages']['fetch-suggestions-error']
           );
+        })
+        .finally(() => {
+          handleIsSuggestionsLoading(false);
         });
     }
   }, [searchText]);
@@ -293,7 +299,6 @@ const GlobalSearchSuggestions = ({
       />
       <Select
         autoFocus
-        open
         showSearch
         bordered={false}
         className="global-search-input"
@@ -307,16 +312,17 @@ const GlobalSearchSuggestions = ({
         listHeight={220}
         notFoundContent={
           <div className="tw-flex tw-flex-col tw-w-full tw-h-56 tw-items-center tw-justify-center tw-pb-9">
-            <NoDataFoundSVG />
-            <Typography>No Results Found</Typography>
+            {isSuggestionsLoading ? <Loader size="small" /> : <Empty />}
           </div>
         }
+        open={!isEmpty(value)}
         placeholder="Search"
         placement="bottomRight"
         ref={selectRef}
         size="large"
         style={{ width: '572px' }}
         suffixIcon={<CmdKIcon />}
+        transitionName=""
         value={value}
         onChange={(value) => {
           history.push(value);