For space invite previews, use room summary API to get the right member count (#6982)

src/components/structures/SpaceRoomView.tsx

@@ -127,8 +127,17 @@ const useMyRoomMembership = (room: Room) => {
     return membership;
 };
 
-const SpaceInfo = ({ space }) => {
+const SpaceInfo = ({ space }: { space: Room }) => {
+    const summary = useAsyncMemo(() => {
+        if (space.getMyMembership() !== "invite") return;
+        try {
+            return space.client.getRoomSummary(space.roomId);
+        } catch (e) {
+            return null;
+        }
+    }, [space]);
     const joinRule = useRoomState(space, state => state.getJoinRule());
+    const membership = useMyRoomMembership(space);
 
     let visibilitySection;
     if (joinRule === "public") {
@@ -141,12 +150,18 @@ const SpaceInfo = ({ space }) => {
         </span>;
     }
 
-    return <div className="mx_SpaceRoomView_info">
-        { visibilitySection }
-        { joinRule === "public" && <RoomMemberCount room={space}>
+    let memberSection;
+    if (membership === "invite" && summary) {
+        // Don't trust local state and instead use the summary API
+        memberSection = <span className="mx_SpaceRoomView_info_memberCount">
+            { _t("%(count)s members", { count: summary.num_joined_members }) }
+        </span>;
+    } else if (summary === null) {
+        memberSection = <RoomMemberCount room={space}>
             { (count) => count > 0 ? (
                 <AccessibleButton
                     kind="link"
+                    className="mx_SpaceRoomView_info_memberCount"
                     onClick={() => {
                         defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
                             action: Action.SetRightPanelPhase,
@@ -158,7 +173,12 @@ const SpaceInfo = ({ space }) => {
                     { _t("%(count)s members", { count }) }
                 </AccessibleButton>
             ) : null }
-        </RoomMemberCount> }
+        </RoomMemberCount>;
+    }
+
+    return <div className="mx_SpaceRoomView_info">
+        { visibilitySection }
+        { memberSection }
     </div>;
 };