Fix terminal view lag while route changes (#3228)

* fix: 🐛 fixed terminal view being visible after route change

* test: 💍 fixed tests

* chore: 🤖 used willTransition hook

* chore: 🤖 hides terminal view on willtransition

* fix: 🐛 removed unneccessary await from hideTerminalView

* chore: 🤖 removed extra hideterminalview call

* chore: 🤖 removed settabactive on failure

ui/desktop/app/routes/scopes/scope/projects/sessions/session.js

@@ -5,7 +5,9 @@
 
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
+import { action } from '@ember/object';
 import { TYPE_TARGET_RDP } from 'api/models/target';
+
 const { __electronLog } = globalThis;
 
 export default class ScopesScopeProjectsSessionsSessionRoute extends Route {
@@ -16,6 +18,7 @@ export default class ScopesScopeProjectsSessionsSessionRoute extends Route {
   @service flashMessages;
   @service intl;
   @service storage;
+  @service terminal;
 
   // =methods
 
@@ -97,4 +100,22 @@ export default class ScopesScopeProjectsSessionsSessionRoute extends Route {
 
     return session;
   }
+
+  @action
+  async willTransition(transition) {
+    // If the terminal tab is active, we want to hide it before transitioning to prevent the terminal from briefly remaining visible after route transition.
+    if (this.terminal.isTerminalTabActive) {
+      transition.abort();
+      try {
+        // wait for terminal to hide
+        await this.terminal.setTerminalTabActive(false);
+        // retry the transition after hiding
+        transition.retry();
+      } catch (error) {
+        __electronLog?.error('Terminal hide failed', error.message);
+        // let transition proceed
+        transition.retry();
+      }
+    }
+  }
 }

ui/desktop/app/services/terminal.js

@@ -53,7 +53,7 @@ export default class TerminalService extends Service {
     this.isTerminalTabActive = isActive;
 
     if (!isActive) {
-      this.hideTerminalView();
+      return this.hideTerminalView();
     }
   }
 
@@ -72,7 +72,7 @@ export default class TerminalService extends Service {
    * Hides the terminal view. We do this instead of destroying the view because we want to preserve the state of the terminal session.
    */
   hideTerminalView() {
-    window.webContentView?.hideTerminalView();
+    return window.webContentView?.hideTerminalView();
   }
 
   createTerminalView(payload) {

ui/desktop/electron-app/src/ipc/handlers.js

@@ -320,9 +320,7 @@ ipcMain.on('destroyTerminalView', () => {
 /**
  * Hides the terminal view from the main window
  */
-ipcMain.on('hideTerminalView', () => {
-  terminalManager.hideTerminalView();
-});
+handle('hideTerminalView', () => terminalManager.hideTerminalView());
 
 /**
  * Positions the terminal view within the main window based on the provided position

ui/desktop/electron-app/src/preload.js

@@ -104,7 +104,7 @@ contextBridge.exposeInMainWorld('webContentView', {
     ipcRenderer.send('destroyTerminalView');
   },
   hideTerminalView: () => {
-    ipcRenderer.send('hideTerminalView');
+    return invoke('hideTerminalView');
   },
   positionTerminalView: (position) => {
     ipcRenderer.send('positionTerminalView', position);