finished typing

src/App.tsx

@@ -32,6 +32,7 @@ function App() {
   const token = useSelector(getToken)
   const { companionId } = useSelector(getChat)
   const dispatch = useDispatch()
+  const handleTypingClose = async () => await typingChat(companionId,false)
 
   useEffect(() => {
     if(!localStorage.isChecked) localStorage.isChecked = 'true'
@@ -62,10 +63,10 @@ function App() {
     window.addEventListener("beforeunload",handleTypingChat)
     return () => window.removeEventListener("beforeunload", handleTypingChat)
 
-  }, [companionId])  
+  }, [companionId])
 
   return (
-  <div className={s.appWrapper}>
+  <div onMouseLeave={handleTypingClose} className={s.appWrapper}>
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
       <Suspense fallback={<Load/>}>
         <BrowserRouter>

src/components/HomePage/LeftBar/ChatsList/index.tsx

@@ -18,6 +18,7 @@ import { getState } from '../../../../redux/chats/selector'
 import { asyncGetChats } from '../../../../redux/chats/operations'
 import { asyncStartChatById } from '../../../../redux/chat/operations'
 import { actionScroll } from '../../../../redux/control/action'
+import { fontSize } from '@mui/system';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
@@ -48,6 +49,7 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
   },
 }));
 
+
 const useStyles = makeStyles({
   list: {
     width: '100%',
@@ -154,7 +156,24 @@ const useStyles = makeStyles({
     fontSize: 12,
     marginLeft: 5,
     color: '#1b1b1b'
-  }
+  },
+  listItem_typing: {
+    color: '#4d4d4d',
+    animation: 'ripple 4s infinite ease-in-out',   
+  },  
+  listItem_dots: {
+    color: '#1b1b1b',
+    fontWeight: 'bold',
+    display:'inline-block',
+    fontFamily: 'monospace',
+    clipPath: 'inset(0 3ch 0 0)',
+    animation: `$run 2s steps(5) infinite`,   
+  },
+  '@keyframes run': {
+    to: {
+       clipPath: 'inset(0 -1ch 0 0)'
+    },
+  },
 })
 
 const ChatsList = () => {
@@ -229,9 +248,10 @@ const ChatsList = () => {
             <span>{`${firstLetter(name)}${slicedWord(name, 15, 1)} 
              ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
             {mute&&<VolumeOffIcon className={classes.listItemInnerText__icon} fontSize='small' />}</div>}
-             secondary={typing?'typing...':lastMessages[i] ? slicedWord(lastMessages[i].message, 35) :
-              `${firstLetter(name)}${slicedWord(name, 8, 1)} joined Telegram`}
-              secondaryTypographyProps={{color: "#0379af"}}/>
+            secondary={typing ? <span className={classes.listItem_typing}>
+              typing<span className={classes.listItem_dots}>...</span></span> :
+              lastMessages[i] ? slicedWord(lastMessages[i].message, 35) :
+              `${firstLetter(name)}${slicedWord(name, 8, 1)} joined Telegram`}/>
           <ListItemIcon className={classes.listItem_iconRight}>
                <div className={classes.listItem_iconTimeChecked}>
                  {watched&& <DoneAllIcon style={{ color: '#18bd03' }} fontSize='small' />}