diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 74317041bd..34c773d3c9 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -249,8 +249,9 @@ export default class AppTile extends React.Component { private getNewState(newProps: IProps): IState { return { initialising: true, // True while we are mangling the widget URL - // True while the iframe content is loading - loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this.persistKey), + // Don't show loading at all if the widget is ready once the IFrame is loaded (waitForIframeLoad = true). + // We only need the loading screen if the widget sends a contentLoaded event (waitForIframeLoad = false). + loading: !this.props.waitForIframeLoad && !PersistedElement.isMounted(this.persistKey), // 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), @@ -312,7 +313,6 @@ export default class AppTile extends React.Component { if (this.props.room) { this.context.on(RoomEvent.MyMembership, this.onMyMembership); } - this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange); // Widget action listeners this.dispatcherRef = dis.register(this.onAction); @@ -352,7 +352,7 @@ export default class AppTile extends React.Component { } private setupSgListeners(): void { - this.sgWidget?.on("preparing", this.onWidgetPreparing); + this.sgWidget?.on("ready", this.onWidgetReady); this.sgWidget?.on("error:preparing", this.updateRequiresClient); // emits when the capabilities have been set up or changed this.sgWidget?.on("capabilitiesNotified", this.updateRequiresClient); @@ -360,7 +360,7 @@ export default class AppTile extends React.Component { private stopSgListeners(): void { if (!this.sgWidget) return; - this.sgWidget.off("preparing", this.onWidgetPreparing); + this.sgWidget?.off("ready", this.onWidgetReady); this.sgWidget.off("error:preparing", this.updateRequiresClient); this.sgWidget.off("capabilitiesNotified", this.updateRequiresClient); } @@ -446,8 +446,7 @@ export default class AppTile extends React.Component { this.sgWidget?.stopMessaging({ forceDestroy: true }); } - - private onWidgetPreparing = (): void => { + private onWidgetReady = (): void => { this.setState({ loading: false }); }; diff --git a/src/models/Call.ts b/src/models/Call.ts index b6c1cda662..369f712534 100644 --- a/src/models/Call.ts +++ b/src/models/Call.ts @@ -758,7 +758,7 @@ export class ElementCall extends Call { name: "Element Call", type: WidgetType.CALL.preferred, url: url.toString(), - // waitForIframeLoad: false, + waitForIframeLoad: false, data: ElementCall.getWidgetData( client, roomId, diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 6cb9d8c572..92b89013e1 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -47,7 +47,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] = id="1" >