Merge pull request #6702 from nordeck/nic/fix/even-tile-preview

Replace fake username in EventTilePreview with a proper loading state

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,
         };
     }