Allow connecting a tunnel in a disconnecting state

2 files changed, 13 insertions, 9 deletions

diff --git a/gui/packages/desktop/src/renderer/app.js b/gui/packages/desktop/src/renderer/app.js
index 0f281ab42c..70fe1365d7 100644
--- a/gui/packages/desktop/src/renderer/app.js
+++ b/gui/packages/desktop/src/renderer/app.js
@@ -228,20 +228,24 @@ export default class AppRenderer {
     }
   }
 
-  async connectTunnel() {
-    const actions = this._reduxActions;
+  async connectTunnel(): Promise<void> {
+    const state = this._tunnelState.state;
 
     // connect only if tunnel is disconnected or blocked.
-    if (this._tunnelState.state === 'disconnected' || this._tunnelState.state === 'blocked') {
-      // switch to connecting state immediately to prevent a lag that may be caused by RPC
-      // communication delay
-      actions.connection.connecting(null);
+    if (state === 'disconnecting' || state === 'disconnected' || state === 'blocked') {
+      // switch to the connecting state ahead of time to make the app look more responsive
+      this._reduxActions.connection.connecting(null);
 
-      await this._daemonRpc.connectTunnel();
+      return this._daemonRpc.connectTunnel();
     }
   }
 
   disconnectTunnel() {
+    const actions = this._reduxActions;
+
+    // switch to disconnected state ahead of time to make the app look more responsive
+    actions.connection.disconnected();
+
     return this._daemonRpc.disconnectTunnel();
   }
 
diff --git a/gui/packages/desktop/src/renderer/containers/ConnectPage.js b/gui/packages/desktop/src/renderer/containers/ConnectPage.js
index f433a795e2..57ca284c4b 100644
--- a/gui/packages/desktop/src/renderer/containers/ConnectPage.js
+++ b/gui/packages/desktop/src/renderer/containers/ConnectPage.js
@@ -82,9 +82,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) =>
     onSelectLocation: () => {
       history.push('/select-location');
     },
-    onConnect: () => {
+    onConnect: async () => {
       try {
-        props.app.connectTunnel();
+        await props.app.connectTunnel();
       } catch (error) {
         log.error(`Failed to connect the tunnel: ${error.message}`);
       }