From 7d051d6a1d0d927732adf44ea79534c64ccc326d Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 5 Mar 2020 17:44:35 +0100
Subject: [PATCH] await request promise inside encryption panel to show spinner

---
 src/components/structures/RightPanel.js           |  2 ++
 .../views/right_panel/EncryptionPanel.js          | 15 ++++++++++++++-
 src/components/views/right_panel/UserInfo.js      |  4 ++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 20df323c10..8d25116827 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -182,6 +182,7 @@ export default class RightPanel extends React.Component {
                 member: payload.member,
                 event: payload.event,
                 verificationRequest: payload.verificationRequest,
+                verificationRequestPromise: payload.verificationRequestPromise,
             });
         }
     }
@@ -231,6 +232,7 @@ export default class RightPanel extends React.Component {
                         onClose={onClose}
                         phase={this.state.phase}
                         verificationRequest={this.state.verificationRequest}
+                        verificationRequestPromise={this.state.verificationRequestPromise}
                     />;
                 } else {
                     panel = <MemberInfo
diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 4723211de4..a14d4a2b7d 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -30,7 +30,7 @@ import {_t} from "../../../languageHandler";
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
-const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
+const EncryptionPanel = ({verificationRequest, verificationRequestPromise, member, onClose, layout}) => {
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
     // before we have a request
@@ -43,6 +43,19 @@ const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
             setPhase(verificationRequest.phase);
         }
     }, [verificationRequest]);
+
+    useEffect(() => {
+        async function awaitPromise() {
+            setRequesting(true);
+            const request = await verificationRequestPromise;
+            setRequesting(false);
+            setRequest(request);
+            setPhase(request.phase);
+        }
+        if (verificationRequestPromise) {
+            awaitPromise();
+        }
+    }, [verificationRequestPromise]);
     const changeHandler = useCallback(() => {
         // handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
         if (request && request.cancelled && MISMATCHES.includes(request.cancellationCode)) {
diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js
index b8ba6968a4..17cb80492e 100644
--- a/src/components/views/right_panel/UserInfo.js
+++ b/src/components/views/right_panel/UserInfo.js
@@ -171,14 +171,14 @@ async function verifyDevice(userId, device) {
                 return;
             }
             const cli = MatrixClientPeg.get();
-            const verificationRequest = await cli.requestVerification(
+            const verificationRequestPromise = cli.requestVerification(
                 userId,
                 [device.deviceId],
             );
             dis.dispatch({
                 action: "set_right_panel_phase",
                 phase: RIGHT_PANEL_PHASES.EncryptionPanel,
-                refireParams: {member, verificationRequest},
+                refireParams: {member, verificationRequestPromise},
             });
         },
         primaryButton: _t("Done"),