diff --git a/packages/desktop/src/components/Conversations.tsx b/packages/desktop/src/components/Conversations.tsx index dcf87b7..5f18c94 100644 --- a/packages/desktop/src/components/Conversations.tsx +++ b/packages/desktop/src/components/Conversations.tsx @@ -13,6 +13,7 @@ import { Stack, Typography, Input, + CircularProgress, } from '@mui/material'; import { blueGrey } from '@mui/material/colors'; import { FiActivity, FiInbox, FiSearch } from 'react-icons/fi'; @@ -34,6 +35,7 @@ const Conversations = () => { }, [enqueueSnackbar, searchRef]); const [searchUsersResults, setSearchUsersResults] = useState([]); + const [searching, setSearching] = useState(false); useKey('Shift', onSearchFocus); @@ -46,12 +48,22 @@ const Conversations = () => { setSearchUsersResults(results); console.warn(results); + + setSearching(false); } }, 500, [searchVal, enqueueSnackbar, setSearchUsersResults], ); + const handleChangeSearchInput = useCallback( + (e: React.ChangeEvent) => { + setSearching(true); + setSearchVal(e.target.value); + }, + [setSearching, setSearchVal], + ); + return ( <> { setSearchVal(e.target.value)} + onChange={handleChangeSearchInput} value={searchVal} placeholder={'Find or start a conversation'} inputRef={searchRef} /> + {searching && } + @@ -121,9 +135,7 @@ const Conversations = () => { - -