yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-27 18:07:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui) Debounce auto-complete in search bar (#9205)

Browse Source
This commit is contained in:
Chris Collins 2023-11-08 14:36:33 -05:00 committed by GitHub
parent 332d4afaab
commit 7213591410
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
datahub-web-react/src/app/home/HomePageHeader.tsx
View File

@ -1,6 +1,7 @@
import React, { useEffect, useMemo, useState } from 'react';
import { useHistory } from 'react-router';
import { Typography, Image, Row, Button, Tag } from 'antd';
import { debounce } from 'lodash';
import styled, { useTheme } from 'styled-components/macro';
import { RightOutlined } from '@ant-design/icons';
import { ManageAccount } from '../shared/ManageAccount';
@ -24,6 +25,7 @@ import { getAutoCompleteInputFromQuickFilter } from '../search/utils/filterUtils
import { useUserContext } from '../context/useUserContext';
import AcrylDemoBanner from './AcrylDemoBanner';
import DemoButton from '../entity/shared/components/styled/DemoButton';
import { HALF_SECOND_IN_MS } from '../entity/shared/tabs/Dataset/Queries/utils/constants';
const Background = styled.div`
width: 100%;
@ -176,7 +178,7 @@ export const HomePageHeader = () => {
});
};
const onAutoComplete = (query: string) => {
const onAutoComplete = debounce((query: string) => {
if (query && query.trim() !== '') {
getAutoCompleteResultsForMultiple({
variables: {
@ -189,7 +191,7 @@ export const HomePageHeader = () => {
},
});
}
};
}, HALF_SECOND_IN_MS);
const onClickExploreAll = () => {
analytics.event({

6
datahub-web-react/src/app/search/SearchablePage.tsx
View File

@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router';
import { debounce } from 'lodash';
import * as QueryString from 'query-string';
import { useTheme } from 'styled-components';
import { SearchHeader } from './SearchHeader';
@ -17,6 +18,7 @@ import { getAutoCompleteInputFromQuickFilter } from './utils/filterUtils';
import { useQuickFiltersContext } from '../../providers/QuickFiltersContext';
import { useUserContext } from '../context/useUserContext';
import { useSelectedSortOption } from './context/SearchContext';
import { HALF_SECOND_IN_MS } from '../entity/shared/tabs/Dataset/Queries/utils/constants';
const styles = {
children: {
@ -93,7 +95,7 @@ export const SearchablePage = ({ onSearch, onAutoComplete, children }: Props) =>
});
};
const autoComplete = (query: string) => {
const autoComplete = debounce((query: string) => {
if (query && query.trim() !== '') {
getAutoCompleteResults({
variables: {
@ -105,7 +107,7 @@ export const SearchablePage = ({ onSearch, onAutoComplete, children }: Props) =>
},
});
}
};
}, HALF_SECOND_IN_MS);
// Load correct autocomplete results on initial page load.
useEffect(() => {