diff --git a/src/pages/dashboard/components/Search.tsx b/src/pages/dashboard/components/Search.tsx index 81baa6f55..de47c5aae 100644 --- a/src/pages/dashboard/components/Search.tsx +++ b/src/pages/dashboard/components/Search.tsx @@ -24,6 +24,7 @@ import { useClickAway } from 'react-use'; import collect from 'collect.js'; import { usePreventNavigation } from '$app/common/hooks/usePreventNavigation'; import { debounce } from 'lodash'; +import { Spinner } from '$app/components/Spinner'; const ComboboxOption = styled(Combobox.Option)` color: ${(props) => props.theme.color}; @@ -41,25 +42,31 @@ export function Search$() { const comboboxRef = useRef(null); const inputRef = useRef(null); - const { data, refetch } = useQuery( + const { data, refetch, isFetching } = useQuery( ['/api/v1/search'], () => { - const $endpoint = query.length === 0 ? '/api/v1/search' : `/api/v1/search?search=${query}`; + const $endpoint = + query.length === 0 + ? '/api/v1/search' + : `/api/v1/search?search=${query}`; + return request('POST', endpoint($endpoint)).then( (response: AxiosResponse) => { const formatted: Entry[] = []; - Object.entries(response.data).forEach(([key, value]: [string, SearchRecord[]]) => { - value.forEach((record: SearchRecord) => { - formatted.push({ - id: v4(), - label: record.name, - value: record.id, - resource: record, - searchable: `${t(key)}: ${record.name}`, - eventType: 'external', + Object.entries(response.data).forEach( + ([key, value]: [string, SearchRecord[]]) => { + value.forEach((record: SearchRecord) => { + formatted.push({ + id: v4(), + label: record.name, + value: record.id, + resource: record, + searchable: `${t(key)}: ${record.name}`, + eventType: 'external', + }); }); - }); - }); + } + ); return formatted; } ); @@ -122,28 +129,39 @@ export function Search$() { ref={comboboxRef} >
- setIsVisible(true)} - placeholder={`${t('search')}... (Ctrl K)`} - style={{ backgroundColor: colors.$1, color: colors.$3 }} - /> +
+ + + + + setIsVisible(true)} + placeholder={`${t('search_placeholder')}. (Ctrl+K)`} + style={{ backgroundColor: colors.$1, color: colors.$3 }} + /> +
@@ -197,4 +215,4 @@ export function Search$() { ); } -export const Search = memo(Search$); \ No newline at end of file +export const Search = memo(Search$);