From 50b64d8c557c65974f4f4bddd893b1a4f8a92d27 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 26 Feb 2020 18:30:20 +0100
Subject: [PATCH] add local echo for clicking 'start verification' button

---
 src/components/views/right_panel/EncryptionPanel.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 3ba6ca9a8a..3e9fa4f8b2 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -37,6 +37,7 @@ const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
     useEffect(() => {
         setRequest(verificationRequest);
         if (verificationRequest) {
+            setRequesting(false);
             setPhase(verificationRequest.phase);
         }
     }, [verificationRequest]);
@@ -67,7 +68,11 @@ const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
     }, [onClose, request]);
     useEventEmitter(request, "change", changeHandler);
 
+    // state to show a spinner immediately after clicking "start verification",
+    // before we have a request
+    const [isRequesting, setRequesting] = useState(false);
     const onStartVerification = useCallback(async () => {
+        setRequesting(true);
         const cli = MatrixClientPeg.get();
         const roomId = await ensureDMExists(cli, member.userId);
         const verificationRequest = await cli.requestVerificationDM(member.userId, roomId);
@@ -75,9 +80,11 @@ const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
         setPhase(verificationRequest.phase);
     }, [member.userId]);
 
-    const requested = request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined);
-    const initiatedByMe = request && request.initiatedByMe;
+    const requested =
+        (!request && isRequesting) ||
+        (request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
     if (!request || requested) {
+        const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
         return <EncryptionInfo
             onStartVerification={onStartVerification}
             member={member}