Start DM on first message

cypress/e2e/crypto/crypto.spec.ts

@@ -57,7 +57,7 @@ const startDMWithBob = function(this: CryptoTestContext) {
 };
 
 const testMessages = function(this: CryptoTestContext) {
-    cy.get(".mx_BasicMessageComposer_input").should("have.focus").type("Hey!{enter}");
+    // check the invite message
     cy.contains(".mx_EventTile_body", "Hey!")
         .closest(".mx_EventTile")
         .should("not.have.descendants", ".mx_EventTile_e2eIcon_warning")
@@ -150,6 +150,11 @@ describe("Cryptography", function() {
     it("creating a DM should work, being e2e-encrypted / user verification", function(this: CryptoTestContext) {
         cy.bootstrapCrossSigning();
         startDMWithBob.call(this);
+        // send first message
+        cy.get(".mx_BasicMessageComposer_input")
+            .click()
+            .should("have.focus")
+            .type("Hey!{enter}");
         checkDMRoom();
         bobJoin.call(this);
         testMessages.call(this);

cypress/e2e/spotlight/spotlight.spec.ts

@@ -118,10 +118,13 @@ Cypress.Commands.add("startDM", (name: string) => {
         cy.spotlightResults().should("have.length", 1);
         cy.spotlightResults().eq(0).should("contain", name);
         cy.spotlightResults().eq(0).click();
-    }).then(() => {
-        cy.roomHeaderName().should("contain", name);
-        cy.get(".mx_RoomSublist[aria-label=People]").should("contain", name);
     });
+    // send first message to start DM
+    cy.get(".mx_BasicMessageComposer_input")
+        .should("have.focus")
+        .type("Hey!{enter}");
+    cy.contains(".mx_EventTile_body", "Hey!");
+    cy.get(".mx_RoomSublist[aria-label=People]").should("contain", name);
 });
 
 describe("Spotlight", () => {
@@ -324,11 +327,19 @@ describe("Spotlight", () => {
             cy.spotlightResults().should("have.length", 1);
             cy.spotlightResults().eq(0).should("contain", bot2Name);
             cy.spotlightResults().eq(0).click();
-        }).then(() => {
-            cy.roomHeaderName().should("contain", bot2Name);
-            cy.get(".mx_RoomSublist[aria-label=People]").should("contain", bot2Name);
         });
 
+        // Send first message to actually start DM
+        cy.roomHeaderName().should("contain", bot2Name);
+        cy.get(".mx_BasicMessageComposer_input")
+            .click()
+            .should("have.focus")
+            .type("Hey!{enter}");
+
+        // Assert DM exists by checking for the first message and the room being in the room list
+        cy.contains(".mx_EventTile_body", "Hey!");
+        cy.get(".mx_RoomSublist[aria-label=People]").should("contain", bot2Name);
+
         // Invite BotBob into existing DM with ByteBot
         cy.getDmRooms(bot2.getUserId()).then(dmRooms => dmRooms[0])
             .then(groupDmId => cy.inviteUser(groupDmId, bot1.getUserId()))

res/css/_components.pcss

@@ -38,6 +38,7 @@
 @import "./structures/_GenericErrorPage.pcss";
 @import "./structures/_HeaderButtons.pcss";
 @import "./structures/_HomePage.pcss";
+@import "./structures/_LargeLoader.pcss";
 @import "./structures/_LeftPanel.pcss";
 @import "./structures/_MainSplit.pcss";
 @import "./structures/_MatrixChat.pcss";

res/css/structures/_LargeLoader.pcss

@@ -0,0 +1,37 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LargeLoader {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .mx_Spinner {
+        flex: unset;
+        height: auto;
+        margin-bottom: 32px;
+        margin-top: 33vh;
+    }
+
+    .mx_LargeLoader_text {
+        font-size: 24px;
+        font-weight: 600;
+        padding: 0 16px;
+        position: relative;
+        text-align: center;
+    }
+}

res/css/structures/_RoomView.pcss

@@ -32,6 +32,13 @@ limitations under the License.
     position: relative;
 }
 
+.mx_MainSplit_timeline,
+.mx_RoomView--local {
+    .mx_MessageComposer_wrapper {
+        margin: $spacing-8 $spacing-16;
+    }
+}
+
 .mx_RoomView_auxPanel {
     min-width: 0px;
     width: 100%;
@@ -183,6 +190,10 @@ limitations under the License.
     box-sizing: border-box;
 }
 
+.mx_RoomView--local .mx_ScrollPanel .mx_RoomView_MessageList {
+    justify-content: center;
+}
+
 .mx_RoomView_MessageList li {
     clear: both;
 }

src/components/structures/LargeLoader.tsx

@@ -0,0 +1,37 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import Spinner from "../views/elements/Spinner";
+
+interface LargeLoaderProps {
+    text: string;
+}
+
+/**
+ * Loader component that displays a (almost centered) spinner and loading message.
+ */
+export const LargeLoader: React.FC<LargeLoaderProps> = ({ text }) => {
+    return (
+        <div className="mx_LargeLoader">
+            <Spinner w={45} h={45} />
+            <div className="mx_LargeLoader_text">
+                { text }
+            </div>
+        </div>
+    );
+};