From fcc411f8b93736d00abeecf1403be2627fda5731 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 8 Oct 2020 15:35:22 -0600
Subject: [PATCH] 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 | 7 ++++++-
 src/stores/widgets/StopGapWidget.ts      | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 3405d4ff16..fda2652d12 100644
--- a/src/components/views/elements/AppTile.js
+++ b/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, {});
         }
diff --git a/src/stores/widgets/StopGapWidget.ts b/src/stores/widgets/StopGapWidget.ts
index 9e4d124d5b..dde756cf3b 100644
--- a/src/stores/widgets/StopGapWidget.ts
+++ b/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);