fix wrong following member count on message sent (#1464)

src/app/hooks/useRoomEventReaders.ts

@@ -3,6 +3,11 @@ import { useEffect, useState } from 'react';
 
 const getEventReaders = (room: Room, evtId?: string) => {
   if (!evtId) return [];
+
+  // if eventId is locally generated
+  // we don't have read receipt for it yet
+  if (!evtId.startsWith('$')) return [];
+
   const liveEvents = room.getLiveTimeline().getEvents();
   const userIds: string[] = [];
 
@@ -25,9 +30,25 @@ export const useRoomEventReaders = (room: Room, eventId?: string): string[] => {
       setReaders(getEventReaders(room, eventId));
     };
 
+    const handleLocalEcho: RoomEventHandlerMap[RoomEvent.LocalEchoUpdated] = (
+      event,
+      r,
+      oldEventId
+    ) => {
+      // update members on local event id replaced
+      // with server generated id
+      if (r.roomId !== room.roomId || !oldEventId) return;
+      if (oldEventId.startsWith('$')) return;
+      if (oldEventId !== eventId) return;
+
+      setReaders(getEventReaders(room, event.getId()));
+    };
+
     room.on(RoomEvent.Receipt, handleReceipt);
+    room.on(RoomEvent.LocalEchoUpdated, handleLocalEcho);
     return () => {
       room.removeListener(RoomEvent.Receipt, handleReceipt);
+      room.removeListener(RoomEvent.LocalEchoUpdated, handleLocalEcho);
     };
   }, [room, eventId]);