Add a progress indication to main window when another window is being opened

__tests__/__main__/main-window.mjs

@@ -12,6 +12,7 @@ import {
     getLeaveByInterval,
     getMainWindow,
     resetMainWindow,
+    toggleMainWindowWait,
     triggerStartupDialogs
 } from '../../js/main-window.mjs';
 
@@ -442,6 +443,38 @@ describe('main-window.mjs', () =>
         });
     });
 
+    describe('toggleMainWindowWait()', () =>
+    {
+        it('Starts without wait class', () =>
+        {
+            createWindow();
+            const mainWindow = getMainWindow();
+            mainWindow.webContents.ipc.on(IpcConstants.WindowReadyToShow, async() =>
+            {
+                const hasClass = await mainWindow.webContents.executeJavaScript('$("html").hasClass("wait")');
+                assert.strictEqual(hasClass, false, 'Starts without wait class');
+            });
+        });
+
+        it('Toggling wait state for the window', () =>
+        {
+            createWindow();
+            const mainWindow = getMainWindow();
+            mainWindow.webContents.ipc.on(IpcConstants.WindowReadyToShow, async() =>
+            {
+                toggleMainWindowWait(true);
+                await new Promise(r => setTimeout(r, 50));
+                let hasClass = await mainWindow.webContents.executeJavaScript('$("html").hasClass("wait")');
+                assert.strictEqual(hasClass, true, 'Now has wait class');
+
+                toggleMainWindowWait(false);
+                await new Promise(r => setTimeout(r, 50));
+                hasClass = await mainWindow.webContents.executeJavaScript('$("html").hasClass("wait")');
+                assert.strictEqual(hasClass, false, 'Back to not having wait class');
+            });
+        });
+    });
+
     afterEach(() =>
     {
         resetMainWindow();

css/styles.css

@@ -176,6 +176,23 @@ body {
   }
 }
 
+html.wait {
+  cursor: wait;
+  transition: 0.4s;
+}
+
+html[data-theme="dark"].wait {
+  filter: opacity(0.95);
+}
+
+html[data-theme="cadent-star"].wait {
+  filter: opacity(0.75);
+}
+
+html[data-theme="light"].wait {
+  filter: brightness(0.75);
+}
+
 .dayheader {
   text-align: center;
 }

js/ipc-constants.mjs

@@ -30,6 +30,7 @@ const IpcConstants = Object.freeze(
         ShowDialogSync: 'SHOW_DIALOG_SYNC',
         ShowDialog: 'SHOW_DIALOG',
         SwitchView: 'SWITCH_VIEW',
+        ToggleMainWindowWait: 'TOGGLE_MAIN_WINDOW_WAIT',
         ToggleTrayPunchTime: 'TOGGLE_TRAY_PUNCH_TIME',
         WaiverSaved: 'WAIVER_SAVED',
         WindowReadyToShow: 'WINDOW_READY_TO_SHOW',

js/main-window.mjs

@@ -183,6 +183,16 @@ function createWindow()
     });
 }
 
+/**
+ * Toggles the main window style to indicate an operation is processing
+ *
+ * @param {Boolean} enable Enable or not the style
+ */
+function toggleMainWindowWait(enable)
+{
+    getMainWindow()?.webContents.send(IpcConstants.ToggleMainWindowWait, enable);
+}
+
 function triggerStartupDialogs()
 {
     if (UpdateManager.shouldCheckForUpdates())
@@ -215,5 +225,6 @@ export {
     getLeaveByInterval,
     getMainWindow,
     resetMainWindow,
+    toggleMainWindowWait,
     triggerStartupDialogs,
 };

js/windows.mjs

@@ -5,6 +5,7 @@ import path from 'path';
 
 import { appConfig, rootDir } from './app-config.mjs';
 import { getDateStr } from './date-aux.mjs';
+import { toggleMainWindowWait } from './main-window.mjs';
 import { getSavedPreferences } from './saved-preferences.mjs';
 import { getUserPreferences, savePreferences } from './user-preferences.mjs';
 import IpcConstants from './ipc-constants.mjs';
@@ -54,6 +55,7 @@ class Windows
         global.waiverWindow.loadURL(htmlPath);
         global.waiverWindow.webContents.ipc.on(IpcConstants.WindowReadyToShow, () =>
         {
+            toggleMainWindowWait(false /*enable*/);
             global.waiverWindow.show();
         });
         global.waiverWindow.on('close', function()
@@ -68,6 +70,7 @@ class Windows
                 BrowserWindow.getFocusedWindow().webContents.toggleDevTools();
             }
         });
+        toggleMainWindowWait(true /*enable*/);
     }
 
     static openPreferencesWindow(mainWindow)
@@ -102,6 +105,7 @@ class Windows
         global.prefWindow.loadURL(htmlPath);
         global.prefWindow.webContents.ipc.on(IpcConstants.WindowReadyToShow, () =>
         {
+            toggleMainWindowWait(false /*enable*/);
             global.prefWindow.show();
         });
         global.prefWindow.on('close', function()
@@ -121,6 +125,7 @@ class Windows
                 BrowserWindow.getFocusedWindow().webContents.toggleDevTools();
             }
         });
+        toggleMainWindowWait(true /*enable*/);
     }
 
     /**

renderer/preload-scripts/calendar-api.mjs

@@ -54,6 +54,7 @@ const calendarApi = {
     handlePunchDate: (callback) => ipcRenderer.on(IpcConstants.PunchDate, callback),
     handleThemeChange: (callback) => ipcRenderer.on(IpcConstants.ReloadTheme, callback),
     handleLeaveBy: (callback) => ipcRenderer.on(IpcConstants.GetLeaveBy, callback),
+    handleToggleMainWindowWait: (callback) => ipcRenderer.on(IpcConstants.ToggleMainWindowWait, callback),
     resizeMainWindow: () => resizeMainWindow(),
     switchView: () => switchView(),
     toggleTrayPunchTime: (enable) => toggleTrayPunchTime(enable),

src/calendar.js

@@ -70,6 +70,26 @@
  */
 window.calendarApi.handleLeaveBy(searchLeaveByElement);
 
+/*
+ * Change the main window style to indicate an operation is processing.
+ */
+window.calendarApi.handleToggleMainWindowWait((event, enable) =>
+{
+    console.log(enable);
+    const waitClass = 'wait';
+    if (enable)
+    {
+        if (!$('html').hasClass(waitClass))
+        {
+            $('html').addClass(waitClass);
+        }
+    }
+    else
+    {
+        $('html').removeClass(waitClass);
+    }
+});
+
 // On page load, create the calendar and setup notification
 $(() =>
 {