Load room member even when member drawer is closed (#1825)

src/app/features/lobby/Lobby.tsx

@@ -47,6 +47,7 @@ import {
 import { useOrphanSpaces } from '../../state/hooks/roomList';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { AccountDataEvent } from '../../../types/matrix/accountData';
+import { useRoomMembers } from '../../hooks/useRoomMembers';
 
 export function Lobby() {
   const navigate = useNavigate();
@@ -57,6 +58,7 @@ export function Lobby() {
   const space = useSpace();
   const spacePowerLevels = usePowerLevels(space);
   const lex = useMemo(() => new ASCIILexicalTable(' '.charCodeAt(0), '~'.charCodeAt(0), 6), []);
+  const members = useRoomMembers(mx, space.roomId);
 
   const scrollRef = useRef<HTMLDivElement>(null);
   const heroSectionRef = useRef<HTMLDivElement>(null);
@@ -519,7 +521,7 @@ export function Lobby() {
         {screenSize === ScreenSize.Desktop && isDrawer && (
           <>
             <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer room={space} />
+            <MembersDrawer room={space} members={members} />
           </>
         )}
       </Box>

src/app/features/room/MembersDrawer.tsx

@@ -35,7 +35,6 @@ import classNames from 'classnames';
 
 import { openProfileViewer } from '../../../client/action/navigation';
 import * as css from './MembersDrawer.css';
-import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { Membership } from '../../../types/matrix/room';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -168,13 +167,13 @@ const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
 
 type MembersDrawerProps = {
   room: Room;
+  members: RoomMember[];
 };
-export function MembersDrawer({ room }: MembersDrawerProps) {
+export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const mx = useMatrixClient();
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
-  const members = useRoomMembers(mx, room.roomId);
   const getPowerLevelTag = usePowerLevelTags();
   const fetchingMembers = members.length < room.getJoinedMemberCount();
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');

src/app/features/room/Room.tsx

@@ -12,6 +12,7 @@ import { useRoom } from '../../hooks/useRoom';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../../client/action/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useRoomMembers } from '../../hooks/useRoomMembers';
 
 export function Room() {
   const { eventId } = useParams();
@@ -21,6 +22,7 @@ export function Room() {
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const screenSize = useScreenSizeContext();
   const powerLevels = usePowerLevels(room);
+  const members = useRoomMembers(mx, room.roomId);
 
   useKeyDown(
     window,
@@ -30,7 +32,7 @@ export function Room() {
           markAsRead(mx, room.roomId);
         }
       },
-      [room.roomId]
+      [mx, room.roomId]
     )
   );
 
@@ -41,7 +43,7 @@ export function Room() {
         {screenSize === ScreenSize.Desktop && isDrawer && (
           <>
             <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer key={room.roomId} room={room} />
+            <MembersDrawer key={room.roomId} room={room} members={members} />
           </>
         )}
       </Box>