using user cache only and relying on that instead of fetching users

packages/desktop/src/components/ConversationList.tsx

@@ -94,25 +94,9 @@ function ConversationRow({ conversation }: { conversation: Conversation }) {
   const { user } = useAuth();
   const { getUser, selectedConversation, selectConversation } = useTerminal();
 
-  const [conversationUsers, setConversationUsers] = useImmer<User[]>([]);
-
   const rendersCount = useRendersCount();
   console.warn('RENDER COUNT | CONVERSATION LIST ROW | ', rendersCount);
 
-  useEffect(() => {
-    (async () => {
-      const userPromises = conversation.memberIdsList
-        // .filter((memberId) => memberId !== user.uid)
-        .map(async (memberId) => await getUser(memberId));
-
-      const userSettled = await Promise.all(userPromises);
-
-      setConversationUsers(userSettled);
-    })();
-
-    return;
-  }, [conversation.memberIdsList, getUser, user, setConversationUsers]);
-
   return (
     <ListItem key={`${conversation.id}-priorityConvoList`}>
       <ListItemButton
@@ -129,13 +113,16 @@ function ConversationRow({ conversation }: { conversation: Conversation }) {
           </Box>
         )}
 
-        <Box sx={{ ml: 1, mr: 'auto', color: 'GrayText' }}>
+        <Box sx={{ ml: 2, mr: 'auto', color: 'GrayText' }}>
-          <ConversationLabel users={conversationUsers} conversationName={conversation.name} />
+          <ConversationLabel
+            users={conversation.userCache ?? []}
+            conversationName={conversation.name}
+          />
         </Box>
 
         <ListItemAvatar>
           <AvatarGroup variant={'rounded'}>
-            {conversationUsers.map((conversationUser, index) => (
+            {conversation.userCache?.map((conversationUser, index) => (
               <Avatar
                 key={`${conversation.id}-${conversationUser.uid}-convoIcon`}
                 alt={conversationUser?.displayName}

packages/desktop/src/components/Terminal.tsx

@@ -335,8 +335,8 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
 
   const [isUserSpeaking, setIsUserSpeaking] = useState<boolean>(false);
 
-  const [userAudioStream, setUserAudioStream] = useState<MediaStream>(null);
+  const [userAudioStream, setUserAudioStream] = useState<MediaStream | null>(null);
-  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>(null);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
 
   // from the time of starting to speak to finally sent to everyone out there
   // feeling to user that everyone is listening right now even though it's only recording
@@ -414,7 +414,7 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
       return;
     }
 
-    if (!userAudioStream) {
+    if (!userAudioStream || !mediaRecorder) {
       enqueueSnackbar('Check your audio mic permissions in preferences!!', { variant: 'error' });
 
       handleAskForMicrophonePermissions();