Element Call: fix widget shown while its still loading (`waitForIfram…

…eLoad=false`) (#12292) * show loading spinner also if waitForIframeLoad = false Configure EC so it waits for the content loaded action !WARNING This breaks compatibility with the full mesh branch. I would like to discuss here if/when we can do that. Signed-off-by: Timo K <[email protected]> * stop show loading screen on widget ready (instead of preparing) Signed-off-by: Timo K <[email protected]> * wait until widget loading is over before comparing screenshots Signed-off-by: Timo K <[email protected]> * fix waitForIFrame=true widgets Signed-off-by: Timo K <[email protected]> * test Signed-off-by: Timo K <[email protected]> * always start with loading true. + cleanup Signed-off-by: Timo K <[email protected]> * simplify loading Signed-off-by: Timo K <[email protected]> * update snapshots (start not in loading state for waitForIframe = true widgets) Signed-off-by: Timo K <[email protected]> --------- Signed-off-by: Timo K <[email protected]>
matrix-org · Mar 12, 2024 · 396829e · 396829e
1 parent 753fc2d
commit 396829e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git 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<IProps, IState> {
     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<IProps, IState> {
         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,15 +352,15 @@ export default class AppTile extends React.Component<IProps, IState> {
     }
 
     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);
     }
 
     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<IProps, IState> {
 
         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
@@ -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
@@ -47,7 +47,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
         id="1"
       >
         <div
-          class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
+          class="mx_AppTileBody mx_AppTileBody--large"
         >
           <div
             class="mx_AppTileBody_fadeInSpinner"
@@ -412,7 +412,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
             </span>
           </div>
           <div
-            class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading"
+            class="mx_AppTileBody mx_AppTileBody--large"
           >
             <div
               class="mx_AppTileBody_fadeInSpinner"

diff --git a/test/test-utils/call.ts b/test/test-utils/call.ts
@@ -38,9 +38,8 @@ export class MockedCall extends Call {
                 url: "https://example.org",
                 name: "Group call",
                 creatorUserId: "@alice:example.org",
-                // waitForIframeLoad = false, makes the widget API wait for the 'contentLoaded' event instead.
-                // This is how the EC is designed, but for backwards compatibility (full mesh) we currently need to use waitForIframeLoad = true
-                // waitForIframeLoad: false
+                // waitForIframeLoad = false, makes the widget API wait for the 'contentLoaded' event.
+                waitForIframeLoad: false,
             },
             room.client,
         );