Use new preparing event for widget communications

Fixes https://github.com/vector-im/element-web/issues/15404

We need to make sure we don't accidentally call the widget before its ready, but we can happily show it once it is loaded/prepared.

src/components/views/elements/AppTile.js

@@ -50,6 +50,7 @@ export default class AppTile extends React.Component {
         // The key used for PersistedElement
         this._persistKey = 'widget_' + this.props.app.id;
         this._sgWidget = new StopGapWidget(this.props);
+        this._sgWidget.on("preparing", this._onWidgetPrepared);
         this._sgWidget.on("ready", this._onWidgetReady);
         this.iframe = null; // ref to the iframe (callback style)
 
@@ -142,6 +143,7 @@ export default class AppTile extends React.Component {
             this._sgWidget.stop();
         }
         this._sgWidget = new StopGapWidget(newProps);
+        this._sgWidget.on("preparing", this._onWidgetPrepared);
         this._sgWidget.on("ready", this._onWidgetReady);
         this._startWidget();
     }
@@ -295,8 +297,11 @@ export default class AppTile extends React.Component {
         this._revokeWidgetPermission();
     }
 
-    _onWidgetReady = () => {
+    _onWidgetPrepared = () => {
         this.setState({loading: false});
+    };
+
+    _onWidgetReady = () => {
         if (WidgetType.JITSI.matches(this.props.app.type)) {
             this._sgWidget.widgetApi.transport.send(ElementWidgetActions.ClientReady, {});
         }

src/stores/widgets/StopGapWidget.ts

@@ -163,6 +163,7 @@ export class StopGapWidget extends EventEmitter {
         if (this.started) return;
         const driver = new StopGapWidgetDriver( this.appTileProps.whitelistCapabilities || []);
         this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
+        this.messaging.addEventListener("preparing", () => this.emit("preparing"));
         this.messaging.addEventListener("ready", () => this.emit("ready"));
         WidgetMessagingStore.instance.storeMessaging(this.mockWidget, this.messaging);