Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Replace fake username in EventTilePreview with a proper loading state #6702

Merged
merged 10 commits into from
Sep 1, 2021
9 changes: 6 additions & 3 deletions src/components/views/elements/EventTilePreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand All @@ -45,7 +46,7 @@ interface IProps {
/**
* The ID of the displayed user
*/
userId: string;
userId?: string;

/**
* The display name of the displayed user
Expand Down Expand Up @@ -118,13 +119,15 @@ 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,
});
skolmer marked this conversation as resolved.
Show resolved Hide resolved

if (!this.props.userId) return <div className={className} style={{ padding: '9px 0' }}><Spinner /></div>;
skolmer marked this conversation as resolved.
Show resolved Hide resolved

const event = this.fakeEvent(this.state);

return <div className={className}>
<EventTile
mxEvent={event}
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/settings/LayoutSwitcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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,
};
}
Expand Down