From 5c76682dd10e930c4d6d8e2c559b6aabec1840e1 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 17 Jan 2022 12:21:01 +0100 Subject: [PATCH 1/5] wait for initial profile load before displaying jitsi Signed-off-by: Kerry Archibald --- src/components/views/elements/AppTile.tsx | 23 ++++++++++++++++++++++- src/stores/OwnProfileStore.ts | 12 +++++++++++- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index b2d5692456e..18c3a22d105 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -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; + // + isUserReady: boolean; error: Error; menuDisplayed: boolean; widgetPageTitle: string; @@ -130,10 +134,25 @@ export default class AppTile extends React.Component { } this.state = this.getNewState(props); + this.watchUserReady(); this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange); } + private watchUserReady = () => { + if (!!OwnProfileStore.instance.profileInfoFetchedAt) { + return; + } + OwnProfileStore.instance.on(UPDATE_EVENT, this.onUserReady); + }; + + private onUserReady = (): void => { + if (OwnProfileStore.instance.profileInfoFetchedAt) { + this.setState({ isUserReady: true }); + OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady); + } + }; + // 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 +179,7 @@ export default class AppTile extends React.Component { // 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), + isUserReady: !!OwnProfileStore.instance.profileInfoFetchedAt, error: null, menuDisplayed: false, widgetPageTitle: this.props.widgetPageTitle, @@ -220,6 +240,7 @@ export default class AppTile extends React.Component { } SettingsStore.unwatchSetting(this.allowedWidgetsWatchRef); + OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady); } private resetWidget(newProps: IProps): void { @@ -473,7 +494,7 @@ export default class AppTile extends React.Component { /> ); - } else if (this.state.initialising) { + } else if (this.state.initialising || !this.state.isUserReady) { appTileBody = (
{ loadingElement } diff --git a/src/stores/OwnProfileStore.ts b/src/stores/OwnProfileStore.ts index db703bcb9f9..271c014422a 100644 --- a/src/stores/OwnProfileStore.ts +++ b/src/stores/OwnProfileStore.ts @@ -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 { } } + public get profileInfoFetchedAt(): number | undefined { + 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 { } 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) => { From 20d2fa309ccc449762024c038eb9c36406434b9a Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 17 Jan 2022 12:26:35 +0100 Subject: [PATCH 2/5] update comment Signed-off-by: Kerry Archibald --- src/components/views/elements/AppTile.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 18c3a22d105..c88741b1d24 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -89,8 +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; - // - isUserReady: boolean; + // Wait for user profile load to display correct name + isUserProfileReady: boolean; error: Error; menuDisplayed: boolean; widgetPageTitle: string; @@ -148,7 +148,7 @@ export default class AppTile extends React.Component { private onUserReady = (): void => { if (OwnProfileStore.instance.profileInfoFetchedAt) { - this.setState({ isUserReady: true }); + this.setState({ isUserProfileReady: true }); OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady); } }; @@ -179,7 +179,7 @@ export default class AppTile extends React.Component { // 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), - isUserReady: !!OwnProfileStore.instance.profileInfoFetchedAt, + isUserProfileReady: !!OwnProfileStore.instance.profileInfoFetchedAt, error: null, menuDisplayed: false, widgetPageTitle: this.props.widgetPageTitle, @@ -494,7 +494,7 @@ export default class AppTile extends React.Component { />
); - } else if (this.state.initialising || !this.state.isUserReady) { + } else if (this.state.initialising || !this.state.isUserProfileReady) { appTileBody = (
{ loadingElement } From 4a3e0b7d29d7cf4c25861219608610ac54e6d13d Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 17 Jan 2022 13:11:16 +0100 Subject: [PATCH 3/5] amke fn return boolean Signed-off-by: Kerry Archibald --- src/components/views/elements/AppTile.tsx | 6 +++--- src/stores/OwnProfileStore.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index c88741b1d24..e9285c4fc26 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -140,14 +140,14 @@ export default class AppTile extends React.Component { } private watchUserReady = () => { - if (!!OwnProfileStore.instance.profileInfoFetchedAt) { + if (OwnProfileStore.instance.isProfileInfoFetched) { return; } OwnProfileStore.instance.on(UPDATE_EVENT, this.onUserReady); }; private onUserReady = (): void => { - if (OwnProfileStore.instance.profileInfoFetchedAt) { + if (OwnProfileStore.instance.isProfileInfoFetched) { this.setState({ isUserProfileReady: true }); OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady); } @@ -179,7 +179,7 @@ export default class AppTile extends React.Component { // 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.profileInfoFetchedAt, + isUserProfileReady: OwnProfileStore.instance.isProfileInfoFetched, error: null, menuDisplayed: false, widgetPageTitle: this.props.widgetPageTitle, diff --git a/src/stores/OwnProfileStore.ts b/src/stores/OwnProfileStore.ts index 271c014422a..5d4ec9d09ba 100644 --- a/src/stores/OwnProfileStore.ts +++ b/src/stores/OwnProfileStore.ts @@ -68,8 +68,8 @@ export class OwnProfileStore extends AsyncStoreWithClient { } } - public get profileInfoFetchedAt(): number | undefined { - return this.state.fetchedAt; + public get isProfileInfoFetched(): boolean { + return !!this.state.fetchedAt; } /** From 9cf7aec7428f73eb919563b72b688fe9734d0042 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 17 Jan 2022 13:45:21 +0100 Subject: [PATCH 4/5] listen for profile update once Signed-off-by: Kerry Archibald --- src/components/views/elements/AppTile.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index e9285c4fc26..6a8951d16e7 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -143,13 +143,12 @@ export default class AppTile extends React.Component { if (OwnProfileStore.instance.isProfileInfoFetched) { return; } - OwnProfileStore.instance.on(UPDATE_EVENT, this.onUserReady); + OwnProfileStore.instance.once(UPDATE_EVENT, this.onUserReady); }; private onUserReady = (): void => { if (OwnProfileStore.instance.isProfileInfoFetched) { this.setState({ isUserProfileReady: true }); - OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady); } }; From 97c60024135e2dd5512d000436615999f95979f1 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Mon, 17 Jan 2022 14:39:19 +0100 Subject: [PATCH 5/5] remove unneccessary check Signed-off-by: Kerry Archibald --- src/components/views/elements/AppTile.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 6a8951d16e7..8a17cbe8122 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -147,9 +147,7 @@ export default class AppTile extends React.Component { }; private onUserReady = (): void => { - if (OwnProfileStore.instance.isProfileInfoFetched) { - this.setState({ isUserProfileReady: true }); - } + this.setState({ isUserProfileReady: true }); }; // This is a function to make the impact of calling SettingsStore slightly less