💫 Display 'Connecting' event on press

lib/tui/index.js

@@ -195,7 +195,7 @@ const getViews = screen => {
                 hidden: true
             }, { borders: true });
             const selectedHostText = text(undefined, undefined, selectedHostForm);
-            const selectedHostActions = flexContainer({ top: 2, width: 50 }, selectedHostForm);
+            const selectedHostActions = flexContainer({ top: 2, width: 75 }, selectedHostForm);
             const cancelButton = button({ content: 'Cancel' }, { color: 'gray' }, selectedHostActions);
             cancelButton.on('press', () => {
                 selectedHostForm.hide();
@@ -209,8 +209,12 @@ const getViews = screen => {
                 screen.render();
                 cancelButton.focus();
             });
-            button({ content: 'Connect' }, undefined, selectedHostActions)
-                .on('press', () => callback({ action: 'connect', host: selectedHost }));
+            const connectButton = button({ content: 'Connect' }, undefined, selectedHostActions)
+            connectButton.on('press', () => {
+                connectButton.setContent('Connecting');
+                screen.render();
+                callback({ action: 'connect', host: selectedHost });
+            });
             button({ content: 'Edit' }, undefined, selectedHostActions)
                 .on('press', () => callback({ action: 'edit', host: selectedHost }));
             const removeButton = button({ content: 'Remove' }, { color: 'red' }, selectedHostActions);