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

Author: t3chguy

res/css/structures/_SpaceRoomView.scss

@@ -511,10 +511,11 @@ $SpaceRoomViewInnerWidth: 428px;
         mask-image: url("$(res)/img/element-icons/lock.svg");
     }
 
-    .mx_AccessibleButton_kind_link {
+    .mx_SpaceRoomView_info_memberCount {
         color: inherit;
         position: relative;
-        padding-left: 16px;
+        padding: 0 0 0 16px;
+        font-size: $font-15px;
 
         &::before {
             content: "·"; // visual separator

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>;
 };