Element Call: fix widget shown while its still loading (`waitForIframeLoad=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 <toger5@hotmail.de>

* stop show loading screen on widget ready (instead of preparing)

Signed-off-by: Timo K <toger5@hotmail.de>

* wait until widget loading is over before comparing screenshots

Signed-off-by: Timo K <toger5@hotmail.de>

* fix waitForIFrame=true widgets

Signed-off-by: Timo K <toger5@hotmail.de>

* test

Signed-off-by: Timo K <toger5@hotmail.de>

* always start with loading true. + cleanup

Signed-off-by: Timo K <toger5@hotmail.de>

* simplify loading

Signed-off-by: Timo K <toger5@hotmail.de>

* update snapshots (start not in loading state for waitForIframe = true widgets)

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>

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,7 +352,7 @@ 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);
@@ -360,7 +360,7 @@ export default class AppTile extends React.Component<IProps, IState> {
 
     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 });
     };
 

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,

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"

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,
         );