mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-15 20:54:59 +08:00
Wait for initial profile load before displaying widget (#7556)
* wait for initial profile load before displaying jitsi Signed-off-by: Kerry Archibald <kerrya@element.io> * update comment Signed-off-by: Kerry Archibald <kerrya@element.io> * amke fn return boolean Signed-off-by: Kerry Archibald <kerrya@element.io> * listen for profile update once Signed-off-by: Kerry Archibald <kerrya@element.io> * remove unneccessary check Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
parent
1f298250b9
commit
42adedc468
@ -44,6 +44,8 @@ import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import CallHandler from '../../../CallHandler';
|
||||
import { IApp } from "../../../stores/WidgetStore";
|
||||
import { WidgetLayoutStore, Container } from "../../../stores/widgets/WidgetLayoutStore";
|
||||
import { OwnProfileStore } from '../../../stores/OwnProfileStore';
|
||||
import { UPDATE_EVENT } from '../../../stores/AsyncStore';
|
||||
|
||||
interface IProps {
|
||||
app: IApp;
|
||||
@ -87,6 +89,8 @@ interface IState {
|
||||
// Assume that widget has permission to load if we are the user who
|
||||
// added it to the room, or if explicitly granted by the user
|
||||
hasPermissionToLoad: boolean;
|
||||
// Wait for user profile load to display correct name
|
||||
isUserProfileReady: boolean;
|
||||
error: Error;
|
||||
menuDisplayed: boolean;
|
||||
widgetPageTitle: string;
|
||||
@ -130,10 +134,22 @@ export default class AppTile extends React.Component<IProps, IState> {
|
||||
}
|
||||
|
||||
this.state = this.getNewState(props);
|
||||
this.watchUserReady();
|
||||
|
||||
this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange);
|
||||
}
|
||||
|
||||
private watchUserReady = () => {
|
||||
if (OwnProfileStore.instance.isProfileInfoFetched) {
|
||||
return;
|
||||
}
|
||||
OwnProfileStore.instance.once(UPDATE_EVENT, this.onUserReady);
|
||||
};
|
||||
|
||||
private onUserReady = (): void => {
|
||||
this.setState({ isUserProfileReady: true });
|
||||
};
|
||||
|
||||
// This is a function to make the impact of calling SettingsStore slightly less
|
||||
private hasPermissionToLoad = (props: IProps): boolean => {
|
||||
if (this.usingLocalWidget()) return true;
|
||||
@ -160,6 +176,7 @@ export default class AppTile extends React.Component<IProps, IState> {
|
||||
// Assume that widget has permission to load if we are the user who
|
||||
// added it to the room, or if explicitly granted by the user
|
||||
hasPermissionToLoad: this.hasPermissionToLoad(newProps),
|
||||
isUserProfileReady: OwnProfileStore.instance.isProfileInfoFetched,
|
||||
error: null,
|
||||
menuDisplayed: false,
|
||||
widgetPageTitle: this.props.widgetPageTitle,
|
||||
@ -220,6 +237,7 @@ export default class AppTile extends React.Component<IProps, IState> {
|
||||
}
|
||||
|
||||
SettingsStore.unwatchSetting(this.allowedWidgetsWatchRef);
|
||||
OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady);
|
||||
}
|
||||
|
||||
private resetWidget(newProps: IProps): void {
|
||||
@ -473,7 +491,7 @@ export default class AppTile extends React.Component<IProps, IState> {
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (this.state.initialising) {
|
||||
} else if (this.state.initialising || !this.state.isUserProfileReady) {
|
||||
appTileBody = (
|
||||
<div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')} style={appTileBodyStyles}>
|
||||
{ loadingElement }
|
||||
|
@ -28,6 +28,7 @@ import { mediaFromMxc } from "../customisations/Media";
|
||||
interface IState {
|
||||
displayName?: string;
|
||||
avatarUrl?: string;
|
||||
fetchedAt?: number;
|
||||
}
|
||||
|
||||
const KEY_DISPLAY_NAME = "mx_profile_displayname";
|
||||
@ -67,6 +68,10 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
|
||||
}
|
||||
}
|
||||
|
||||
public get isProfileInfoFetched(): boolean {
|
||||
return !!this.state.fetchedAt;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the MXC URI of the user's avatar, or null if not present.
|
||||
*/
|
||||
@ -135,7 +140,12 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
|
||||
} else {
|
||||
window.localStorage.removeItem(KEY_AVATAR_URL);
|
||||
}
|
||||
await this.updateState({ displayName: profileInfo.displayname, avatarUrl: profileInfo.avatar_url });
|
||||
|
||||
await this.updateState({
|
||||
displayName: profileInfo.displayname,
|
||||
avatarUrl: profileInfo.avatar_url,
|
||||
fetchedAt: Date.now(),
|
||||
});
|
||||
};
|
||||
|
||||
private onStateEvents = throttle(async (ev: MatrixEvent) => {
|
||||
|
Loading…
Reference in New Issue
Block a user