Add skeleton UI for Room List when no rooms

src/components/views/rooms/RoomList.tsx

@@ -332,6 +332,8 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             return p;
         }, [] as TagID[]);
 
+        const showSkeleton = tagOrder.every(tag => !this.state.sublists[tag]?.length);
+
         for (const orderedTagId of tagOrder) {
             const orderedRooms = this.state.sublists[orderedTagId] || [];
             const extraTiles = orderedTagId === DefaultTagID.Invite ? this.renderCommunityInvites() : null;
@@ -356,6 +358,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 addRoomContextMenu={aesthetics.addRoomContextMenu}
                 isMinimized={this.props.isMinimized}
                 onResize={this.props.onResize}
+                showSkeleton={showSkeleton}
                 extraBadTilesThatShouldntExist={extraTiles}
             />);
         }

src/components/views/rooms/RoomSublist.tsx

@@ -71,6 +71,7 @@ interface IProps {
     isMinimized: boolean;
     tagId: TagID;
     onResize: () => void;
+    showSkeleton?: boolean;
 
     // TODO: Don't use this. It's for community invites, and community invites shouldn't be here.
     // You should feel bad if you use this.
@@ -877,6 +878,8 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                     </Resizable>
                 </React.Fragment>
             );
+        } else if (this.props.showSkeleton && this.state.isExpanded) {
+            content = <div className="mx_RoomSublist_skeletonUI" />;
         }
 
         return (