Hide RoomSublist when empty rather than unmounting them

res/css/views/rooms/_RoomSublist.scss

@@ -18,6 +18,10 @@ limitations under the License.
     margin-left: 8px;
     margin-bottom: 4px;
 
+    &.mx_RoomSublist_hidden {
+        display: none;
+    }
+
     .mx_RoomSublist_headerContainer {
         // Create a flexbox to make alignment easy
         display: flex;

src/components/views/rooms/RoomList.tsx

@@ -86,10 +86,6 @@ 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;
@@ -518,8 +514,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
 
         for (const orderedTagId of tagOrder) {
-            const orderedRooms = this.state.sublists[orderedTagId] || [];
-
             let extraTiles = null;
             if (orderedTagId === DefaultTagID.Invite) {
                 extraTiles = this.renderCommunityInvites();
@@ -527,11 +521,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 extraTiles = this.renderSuggestedRooms();
             }
 
-            const totalTiles = orderedRooms.length + (extraTiles ? extraTiles.length : 0);
-            if (totalTiles === 0 && !ALWAYS_VISIBLE_TAGS.includes(orderedTagId)) {
-                continue; // skip tag - not needed
-            }
-
             const aesthetics: ITagAesthetics = isCustomTag(orderedTagId)
                 ? customTagAesthetics(orderedTagId)
                 : this.tagAesthetics[orderedTagId];

src/components/views/rooms/RoomSublist.tsx

@@ -60,6 +60,11 @@ 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();
 
@@ -762,6 +767,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             '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),
         });
 
         let content = null;