Start DM on first message

cypress/e2e/12-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()))

cypress/e2e/7-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);

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;
 }
@@ -341,3 +352,25 @@ hr.mx_RoomView_myReadMarker {
         background: inherit;
     }
 }
+
+.mx_RoomView_LocalRoomLoader {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .mx_Spinner {
+        flex: unset;
+        height: auto;
+        margin-bottom: 32px;
+        margin-top: 33vh;
+    }
+
+    .mx_RoomView_LocalRoomLoader_text {
+        font-size: 24px;
+        font-weight: 600;
+        padding: 0 16px;
+        position: relative;
+        text-align: center;
+    }
+}