Replace fake username in EventTilePreview with a proper loading state

res/css/_components.scss

@@ -132,6 +132,7 @@
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";
 @import "./views/elements/_EventListSummary.scss";
+@import "./views/elements/_EventTilePreview.scss";
 @import "./views/elements/_FacePile.scss";
 @import "./views/elements/_Field.scss";
 @import "./views/elements/_ImageView.scss";

res/css/views/elements/_EventTilePreview.scss

@@ -0,0 +1,22 @@
+/*
+Copyright 2021 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_EventTilePreview_loader {
+    &.mx_IRCLayout,
+    &.mx_GroupLayout {
+        padding: 9px 0;
+    }
+}

src/components/views/elements/EventTilePreview.tsx

@@ -25,6 +25,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { Layout } from "../../../settings/Layout";
 import { UIFeature } from "../../../settings/UIFeature";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import Spinner from './Spinner';
 
 interface IProps {
     /**
@@ -45,7 +46,7 @@ interface IProps {
     /**
      * The ID of the displayed user
      */
-    userId: string;
+    userId?: string;
 
     /**
      * The display name of the displayed user
@@ -118,13 +119,16 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
     }
 
     public render() {
-        const event = this.fakeEvent(this.state);
-
         const className = classnames(this.props.className, {
             "mx_IRCLayout": this.props.layout == Layout.IRC,
             "mx_GroupLayout": this.props.layout == Layout.Group,
+            "mx_EventTilePreview_loader": !this.props.userId,
         });
 
+        if (!this.props.userId) return <div className={className}><Spinner /></div>;
+
+        const event = this.fakeEvent(this.state);
+
         return <div className={className}>
             <EventTile
                 mxEvent={event}

src/components/views/settings/LayoutSwitcher.tsx

@@ -26,7 +26,7 @@ import { Layout } from "../../../settings/Layout";
 import { SettingLevel } from "../../../settings/SettingLevel";
 
 interface IProps {
-    userId: string;
+    userId?: string;
     displayName: string;
     avatarUrl: string;
     messagePreviewText: string;

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -67,7 +67,7 @@ interface IState extends IThemeState {
     showAdvanced: boolean;
     layout: Layout;
     // User profile data for the message preview
-    userId: string;
+    userId?: string;
     displayName: string;
     avatarUrl: string;
 }
@@ -92,8 +92,8 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             systemFont: SettingsStore.getValue("systemFont"),
             showAdvanced: false,
             layout: SettingsStore.getValue("layout"),
-            userId: "@erim:fink.fink",
-            displayName: "Erimayas Fink",
+            userId: null,
+            displayName: null,
             avatarUrl: null,
         };
     }