diff --git a/apps/playnite-web/src/components/Header.tsx b/apps/playnite-web/src/components/Header.tsx index 72499e98e..a1bb75bc0 100644 --- a/apps/playnite-web/src/components/Header.tsx +++ b/apps/playnite-web/src/components/Header.tsx @@ -1,8 +1,11 @@ import { Divider, TextField, styled } from '@mui/material' +import _ from 'lodash' import { ChangeEvent, FC, PropsWithChildren, useCallback } from 'react' -import { useDispatch, useStore } from 'react-redux' +import { useDispatch } from 'react-redux' import { setNameFilter } from '../api/client/state/librarySlice' +const { debounce } = _ + const HeaderContainer = styled('header')(({ theme }) => ({ display: 'flex', flexDirection: 'row', @@ -20,12 +23,13 @@ const Header: FC> = ({ children, showFilters, }) => { - const store = useStore() - console.dir(store.getState()) const dispatch = useDispatch() - const handleSearch = useCallback((event: ChangeEvent) => { - dispatch(setNameFilter(event.target.value)) - }, []) + const handleSearch = useCallback( + debounce((event: ChangeEvent) => { + dispatch(setNameFilter(event.target.value)) + }, 400), + [], + ) return ( <>