diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 0904df64cf..57c3145d47 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -86,6 +86,10 @@ const TAG_ORDER: TagID[] = [ DefaultTagID.Archived, ]; const CUSTOM_TAGS_BEFORE_TAG = DefaultTagID.LowPriority; +const ALWAYS_VISIBLE_TAGS: TagID[] = [ + DefaultTagID.DM, + DefaultTagID.Untagged, +]; interface ITagAesthetics { sectionLabel: string; @@ -526,6 +530,9 @@ export default class RoomList extends React.PureComponent { : this.tagAesthetics[orderedTagId]; if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`); + // The cost of mounting/unmounting this component all the time + // offsets the memory cost of keeping it at all time and hiding + // it when no results are found components.push( { onResize={this.props.onResize} showSkeleton={showSkeleton} extraTiles={extraTiles} + alwaysVisible={!ALWAYS_VISIBLE_TAGS.includes(orderedTagId)} />); } diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index 0d6dce49b1..a726ab99fc 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -60,11 +60,6 @@ export const HEADER_HEIGHT = 32; // As defined by CSS const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT; -const ALWAYS_VISIBLE_TAGS: TagID[] = [ - DefaultTagID.DM, - DefaultTagID.Untagged, -]; - // HACK: We really shouldn't have to do this. polyfillTouchEvent(); @@ -79,6 +74,7 @@ interface IProps { tagId: TagID; onResize: () => void; showSkeleton?: boolean; + alwaysVisible?: boolean; extraTiles?: ReactComponentElement[]; @@ -767,7 +763,7 @@ export default class RoomSublist extends React.Component { 'mx_RoomSublist': true, 'mx_RoomSublist_hasMenuOpen': !!this.state.contextMenuPosition, 'mx_RoomSublist_minimized': this.props.isMinimized, - 'mx_RoomSublist_hidden': !this.state.rooms.length && !ALWAYS_VISIBLE_TAGS.includes(this.props.tagId), + 'mx_RoomSublist_hidden': !this.state.rooms.length && this.props.alwaysVisible !== true, }); let content = null;