Iterate the filtering prompt

Author: t3chguy

res/css/views/rooms/_RoomList.scss

@@ -33,14 +33,14 @@ limitations under the License.
 
     div:first-child {
         font-weight: $font-semi-bold;
-        margin-bottom: 8px;
     }
 
     .mx_AccessibleButton {
         color: $secondary-fg-color;
         position: relative;
         padding: 0 0 0 24px;
         font-size: inherit;
+        margin-top: 8px;
 
         &::before {
             content: '';
@@ -53,6 +53,13 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
+        }
+
+        &.mx_RoomList_explorePrompt_startChat::before {
+            mask-image: url('$(res)/img/element-icons/feedback.svg');
+        }
+
+        &.mx_RoomList_explorePrompt_explore::before {
             mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
         }
     }

src/components/views/rooms/RoomList.tsx

@@ -284,6 +284,10 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         }
     };
 
+    private onStartChat = () => {
+        dis.dispatch({action: "view_create_chat"});
+    };
+
     private onExplore = () => {
         dis.fire(Action.ViewRoomDirectory);
     };
@@ -335,8 +339,9 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             return p;
         }, [] as TagID[]);
 
-        // show a skeleton UI if the user is in no rooms
-        const showSkeleton = Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
+        // show a skeleton UI if the user is in no rooms and they are not filtering
+        const showSkeleton = !this.state.isNameFiltering &&
+            Object.values(RoomListStore.instance.unfilteredLists).every(list => !list?.length);
 
         for (const orderedTagId of tagOrder) {
             const orderedRooms = this.state.sublists[orderedTagId] || [];
@@ -376,7 +381,18 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
             if (this.state.isNameFiltering) {
                 explorePrompt = <div className="mx_RoomList_explorePrompt">
                     <div>{_t("Can't see what you’re looking for?")}</div>
-                    <AccessibleButton kind="link" onClick={this.onExplore}>
+                    <AccessibleButton
+                        className="mx_RoomList_explorePrompt_startChat"
+                        kind="link"
+                        onClick={this.onStartChat}
+                    >
+                        {_t("Start a new chat")}
+                    </AccessibleButton>
+                    <AccessibleButton
+                        className="mx_RoomList_explorePrompt_explore"
+                        kind="link"
+                        onClick={this.onExplore}
+                    >
                         {_t("Explore all public rooms")}
                     </AccessibleButton>
                 </div>;
@@ -388,7 +404,18 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                 if (unfilteredRooms.length < 1 && unfilteredHistorical < 1) {
                     explorePrompt = <div className="mx_RoomList_explorePrompt">
                         <div>{_t("Use the + to make a new room or explore existing ones below")}</div>
-                        <AccessibleButton kind="link" onClick={this.onExplore}>
+                        <AccessibleButton
+                            className="mx_RoomList_explorePrompt_startChat"
+                            kind="link"
+                            onClick={this.onStartChat}
+                        >
+                            {_t("Start a new chat")}
+                        </AccessibleButton>
+                        <AccessibleButton
+                            className="mx_RoomList_explorePrompt_explore"
+                            kind="link"
+                            onClick={this.onExplore}
+                        >
                             {_t("Explore all public rooms")}
                         </AccessibleButton>
                     </div>;

src/i18n/strings/en_EN.json

@@ -1391,6 +1391,7 @@
     "Historical": "Historical",
     "Custom Tag": "Custom Tag",
     "Can't see what you’re looking for?": "Can't see what you’re looking for?",
+    "Start a new chat": "Start a new chat",
     "Explore all public rooms": "Explore all public rooms",
     "Use the + to make a new room or explore existing ones below": "Use the + to make a new room or explore existing ones below",
     "%(count)s results|other": "%(count)s results",