SearchInObjectList

Some list in the app are searchable. To have the same behaviour everywhere in the app, we've defined a hook and a component to help deal with the search.

import { useDebouncedSearch } from "~/hooks/useDebouncedSearch";
import { SearchInput } from "~/components/SearchInput";
import { useGetList } from '~/generated/graphql'

const Search = () => {
    const [getList, { data, loading }] =
    useGetList({
      variables: { customerId, limit: 20 },
    })
  const { debouncedSearch, isLoading } = useDebouncedSearch(
    getList,
    loading
  );

  return (
    <>
    <SearchInput
      onChange={debouncedSearch}
      placeholder={translate("text_63c6edd80c57d0dfaae3898e")}
    />

    {isLoading && <Icon name="processing" animation="spin">}
    </>
  );
};

Note : the hook allow to debounce the search and not trigger too many api calls and also set a minimum loading time to avoid glitches if the query loads fast

Note : You can also use the useDebouncedSearch hook with another component that might trigger a search (ex: Combobox)