Do some level of local echo for widgets

 * Show a spinner while we wait for widgets to be deleted
 * Hide widgets while they're pending deletion
 * Don't put another jitsi widget into the room if there's already
   one pending

src/CallHandler.js

@@ -62,6 +62,7 @@ import dis from './dispatcher';
 import { showUnknownDeviceDialogForCalls } from './cryptodevices';
 import SettingsStore from "./settings/SettingsStore";
 import WidgetUtils from './utils/WidgetUtils';
+import WidgetEchoStore from './stores/WidgetEchoStore';
 
 global.mxCalls = {
     //room_id: MatrixCall
@@ -402,18 +403,30 @@ function _onAction(payload) {
 }
 
 function _startCallApp(roomId, type) {
+    const room = MatrixClientPeg.get().getRoom(roomId);
+    if (!room) {
+        console.error("Attempted to start conference call widget in unknown room: " + roomId);
+        return;
+    }
+
     dis.dispatch({
         action: 'appsDrawer',
         show: true,
     });
 
-    const room = MatrixClientPeg.get().getRoom(roomId);
-    if (!room) {
-        console.error("Attempted to start conference call widget in unknown room: " + roomId);
+    const currentRoomWidgets = WidgetUtils.getRoomWidgets(room);
+
+    if (WidgetEchoStore.roomHasPendingWidgetsOfType(room, currentRoomWidgets, 'jitsi')) {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+        Modal.createTrackedDialog('Already have pending Jitsi Widget', '', ErrorDialog, {
+            title: _t('Call in Progress'),
+            description: _t('A call is currently being placed!'),
+        });
         return;
     }
 
-    const currentJitsiWidgets = WidgetUtils.getRoomWidgets(room).filter((ev) => {
+    const currentJitsiWidgets = currentRoomWidgets.filter((ev) => {
         return ev.getContent().type === 'jitsi';
     });
     if (currentJitsiWidgets.length > 0) {

src/actions/MatrixActionCreators.js

@@ -183,6 +183,20 @@ function createEventDecryptedAction(matrixClient, event) {
     return { action: 'MatrixActions.Event.decrypted', event };
 }
 
+/**
+ * Create a MatrixActions.RoomState.vents action that represents
+ * a MatrixClient `RoomState.events` matrix event, emitted when the
+ * state events in a room change.
+ *
+ * @param {MatrixClient} matrixClient the matrix client.
+ * @param {MatrixEvent} event matrix event which caused this event to fire.
+ * @param {RoomState} state room state whose RoomState.events dictionary was updated.
+ * @returns {EventDecryptedAction} an action of type `MatrixActions.Event.decrypted`.
+ */
+function createRoomStateEventsAction(matrixClient, event, state) {
+    return { action: 'MatrixActions.RoomState.events', event, state };
+}
+
 /**
  * This object is responsible for dispatching actions when certain events are emitted by
  * the given MatrixClient.
@@ -204,6 +218,7 @@ export default {
         this._addMatrixClientListener(matrixClient, 'Room.timeline', createRoomTimelineAction);
         this._addMatrixClientListener(matrixClient, 'RoomMember.membership', createRoomMembershipAction);
         this._addMatrixClientListener(matrixClient, 'Event.decrypted', createEventDecryptedAction);
+        this._addMatrixClientListener(matrixClient, 'RoomState.events', createRoomStateEventsAction);
     },
 
     /**

src/components/structures/RoomView.js

@@ -45,6 +45,7 @@ import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 
 import RoomViewStore from '../../stores/RoomViewStore';
 import RoomScrollStateStore from '../../stores/RoomScrollStateStore';
+import WidgetEchoStore from '../../stores/WidgetEchoStore';
 import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
 import WidgetUtils from '../../utils/WidgetUtils';
 
@@ -153,6 +154,8 @@ module.exports = React.createClass({
         // Start listening for RoomViewStore updates
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this._onRoomViewStoreUpdate(true);
+
+        WidgetEchoStore.on('updateRoomWidgetEcho', this._onWidgetEchoStoreUpdate);
     },
 
     _onRoomViewStoreUpdate: function(initial) {
@@ -243,6 +246,12 @@ module.exports = React.createClass({
         }
     },
 
+    _onWidgetEchoStoreUpdate: function() {
+        this.setState({
+            showApps: this._shouldShowApps(this.state.room),
+        });
+    },
+
     _setupRoom: function(room, roomId, joining, shouldPeek) {
         // if this is an unknown room then we're in one of three states:
         // - This is a room we can peek into (search engine) (we can /peek)
@@ -319,7 +328,9 @@ module.exports = React.createClass({
             return false;
         }
 
-        return WidgetUtils.getRoomWidgets(room).length > 0;
+        const widgets = WidgetEchoStore.getEchoedRoomWidgets(room, WidgetUtils.getRoomWidgets(room));
+
+        return widgets.length > 0 || WidgetEchoStore.roomHasPendingWidgets(room, WidgetUtils.getRoomWidgets(room));
     },
 
     componentDidMount: function() {
@@ -414,6 +425,8 @@ module.exports = React.createClass({
             this._roomStoreToken.remove();
         }
 
+        WidgetEchoStore.removeListener('updateRoomWidgetEcho', this._onWidgetEchoStoreUpdate);
+
         // cancel any pending calls to the rate_limited_funcs
         this._updateRoomMembers.cancelPendingCall();
 

src/components/views/rooms/AppsDrawer.js

@@ -29,6 +29,7 @@ import ScalarMessaging from '../../../ScalarMessaging';
 import { _t } from '../../../languageHandler';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import SettingsStore from "../../../settings/SettingsStore";
+import WidgetEchoStore from "../../../stores/WidgetEchoStore";
 
 // The maximum number of widgets that can be added in a room
 const MAX_WIDGETS = 2;
@@ -57,6 +58,7 @@ module.exports = React.createClass({
     componentWillMount: function() {
         ScalarMessaging.startListening();
         MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents);
+        WidgetEchoStore.on('updateRoomWidgetEcho', this._updateApps);
     },
 
     componentDidMount: function() {
@@ -82,6 +84,7 @@ module.exports = React.createClass({
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents);
         }
+        WidgetEchoStore.removeListener('updateRoomWidgetEcho', this._updateApps);
         dis.unregister(this.dispatcherRef);
     },
 
@@ -163,7 +166,10 @@ module.exports = React.createClass({
     },
 
     _getApps: function() {
-        return WidgetUtils.getRoomWidgets(this.props.room).map((ev) => {
+        const widgets = WidgetEchoStore.getEchoedRoomWidgets(
+            this.props.room, WidgetUtils.getRoomWidgets(this.props.room),
+        );
+        return widgets.map((ev) => {
             return this._initAppConfig(ev.getStateKey(), ev.getContent(), ev.sender);
         });
     },
@@ -231,7 +237,8 @@ module.exports = React.createClass({
                     waitForIframeLoad={app.waitForIframeLoad}
                     whitelistCapabilities={enableScreenshots ? ["m.capability.screenshot"] : []}
                 />);
-            });
+            },
+        );
 
         let addWidget;
         if (this.props.showApps &&
@@ -250,10 +257,22 @@ module.exports = React.createClass({
             </div>;
         }
 
+        let spinner;
+        if (
+            apps.length === 0 && WidgetEchoStore.roomHasPendingWidgets(
+                this.props.room,
+                WidgetUtils.getRoomWidgets(this.props.room),
+            )
+        ) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            spinner = <Loader />;
+        }
+
         return (
             <div className={'mx_AppsDrawer' + (this.props.hide ? ' mx_AppsDrawer_hidden' : '')}>
                 <div id='apps' className='mx_AppsContainer'>
                     { apps }
+                    { spinner }
                 </div>
                 { this._canUserModify() && addWidget }
             </div>