diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index 0ec1e06fd284..a83631490e88 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -57,6 +57,7 @@ import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingSto import { SdkContextClass } from "../../../contexts/SDKContext"; import { ModuleRunner } from "../../../modules/ModuleRunner"; import { parseUrl } from "../../../utils/UrlUtils"; +import { setTimeout } from "matrix-js-sdk/src/realtime-callbacks"; interface IProps { app: IWidget | IApp; @@ -249,8 +250,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: true, + // 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 +314,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); @@ -353,7 +354,6 @@ export default class AppTile extends React.Component { private setupSgListeners(): void { this.sgWidget?.on("ready", this.onWidgetReady); - this.sgWidget?.on("preparing", this.onWidgetPreparing); this.sgWidget?.on("error:preparing", this.updateRequiresClient); // emits when the capabilities have been set up or changed this.sgWidget?.on("capabilitiesNotified", this.updateRequiresClient); @@ -362,7 +362,6 @@ export default class AppTile extends React.Component { private stopSgListeners(): void { if (!this.sgWidget) return; this.sgWidget?.off("ready", this.onWidgetReady); - this.sgWidget?.off("preparing", this.onWidgetPreparing); this.sgWidget.off("error:preparing", this.updateRequiresClient); this.sgWidget.off("capabilitiesNotified", this.updateRequiresClient); } @@ -448,15 +447,6 @@ export default class AppTile extends React.Component { this.sgWidget?.stopMessaging({ forceDestroy: true }); } - private onWidgetPreparing = (): void => { - if (this.props.waitForIframeLoad) { - // If the widget is configured to start immediately after the IFrame is loaded, (it does not have any custom initialization) - // we need to consider it ready now since it might not even use the widget api. - this.onWidgetReady(); - } - // If waitForIframeLoad = false. We do nothing here. The widget is responsible to send a content_loaded action - // and the messaging will emit "ready" (-> this will call onWidgetReady) - }; private onWidgetReady = (): void => { this.setState({ loading: false }); };