fix: 🐛 Fix race condition in browser window loading (#2701)

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

@@ -85,7 +85,7 @@ if (isWindows()) {
   app.setAppUserModelId(app.name);
 }
 
-const createWindow = (partition, closeWindowCB) => {
+const createWindow = async (partition, closeWindowCB) => {
   /**
    * Enable electron OS window frame/chrome for MacOS only.
    * Disable frame/chrome regardless of OS when
@@ -128,15 +128,17 @@ const createWindow = (partition, closeWindowCB) => {
 
   // If the user-specified cluster URL changes, reload the page so that
   // the CSP can be refreshed with the this source allowed
-  runtimeSettings.onClusterUrlChange(() => browserWindow.loadURL(emberAppURL));
+  runtimeSettings.onClusterUrlChange(
+    async () => await browserWindow.loadURL(emberAppURL),
+  );
 
   // Load the ember application
-  browserWindow.loadURL(emberAppURL);
+  await browserWindow.loadURL(emberAppURL);
 
   // If a loading operation goes wrong, we'll send Electron back to
   // Ember App entry point
-  browserWindow.webContents.on('did-fail-load', () => {
-    browserWindow.loadURL(emberAppURL);
+  browserWindow.webContents.on('did-fail-load', async () => {
+    await browserWindow.loadURL(emberAppURL);
   });
 
   browserWindow.webContents.on('render-process-gone', () => {
@@ -259,7 +261,7 @@ app.on('ready', async () => {
     mainWindow = null;
   };
 
-  mainWindow = createWindow(partition, closeWindowCB);
+  mainWindow = await createWindow(partition, closeWindowCB);
 
   // Check for updates on launch
   appUpdater.run({ suppressNoUpdatePrompt: true });
@@ -270,9 +272,9 @@ app.on('ready', async () => {
    * while the app is not close.
    * More info: https://www.electronjs.org/docs/latest/tutorial/quick-start#open-a-window-if-none-are-open-macos
    */
-  app.on('activate', () => {
+  app.on('activate', async () => {
     if (BrowserWindow.getAllWindows().length === 0) {
-      mainWindow = createWindow(partition, closeWindowCB);
+      mainWindow = await createWindow(partition, closeWindowCB);
     }
   });
 

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

@@ -33,7 +33,7 @@ handle('getClusterUrl', () => runtimeSettings.clusterUrl);
 handle('setClusterUrl', async (requestOrigin) => {
   const clusterUrl = sanitizer.urlValidate(requestOrigin);
   await runtimeSettings.validateClusterUrl(clusterUrl);
-  runtimeSettings.clusterUrl = clusterUrl;
+  await runtimeSettings.setClusterUrl(clusterUrl);
 });
 
 /**

ui/desktop/electron-app/src/models/runtime-settings.js

@@ -18,10 +18,11 @@ class RuntimeSettings {
   get clusterUrl() {
     return this.#clusterUrl;
   }
-  set clusterUrl(clusterUrl) {
+
+  async setClusterUrl(clusterUrl) {
     if (this.#clusterUrl !== clusterUrl) {
       this.#clusterUrl = clusterUrl;
-      this.triggerClusterUrlChanged();
+      await this.triggerClusterUrlChanged();
     }
   }
 
@@ -50,7 +51,7 @@ class RuntimeSettings {
   /**
    * Sets the clusterUrl to null.
    */
-  async resetClusterUrl() {
+  resetClusterUrl() {
     this.clusterUrl = null;
   }
 
@@ -62,8 +63,12 @@ class RuntimeSettings {
     this.#clusterUrlWatchers.push(fn);
   }
 
-  triggerClusterUrlChanged() {
-    this.#clusterUrlWatchers.forEach((fn) => fn(this.#clusterUrl));
+  async triggerClusterUrlChanged() {
+    // We currently only store one function but this will execute serially
+    // which may or may not be the desired behavior if there ever is more
+    for (const fn of this.#clusterUrlWatchers) {
+      await fn(this.#clusterUrl);
+    }
   }
 }