Add splashscreen on app launch

2026-01-26 13:13:34 +01:00 · 2026-01-26 13:13:34 +01:00 · 646aeddae8
parent 9cacce782b
commit 646aeddae8
2 changed files with 60 additions and 1 deletions
--- a/src/main/index.ts
+++ b/src/main/index.ts
@ -8,6 +8,22 @@ autoUpdater.autoDownload = false;
 autoUpdater.autoInstallOnAppQuit = true;

 let mainWindow;
+let splashWindow: BrowserWindow;
+
+function createSplashWindow(): void {
+  splashWindow = new BrowserWindow({
+    width: 350, 
+    height: 350, 
+    transparent: true, 
+    frame: false, 
+    alwaysOnTop: true 
+  });
+  splashWindow.loadFile('src/renderer/splash.html');
+  splashWindow.center();
+  splashWindow.setSkipTaskbar(true);
+  splashWindow.show();
+}
+
 function createWindow(): void {
  // Create the browser window.
  mainWindow = new BrowserWindow({
@ -22,8 +38,18 @@ function createWindow(): void {
    }
  })

+  createSplashWindow();
+
  mainWindow.on('ready-to-show', () => {
-    mainWindow.show()
+    if (is.dev) {
+      setTimeout((): void => {
+        splashWindow.close();
+        mainWindow.show();
+      }, 2000);
+    } else {
+      splashWindow.close();
+      mainWindow.show();
+    }
  })

  mainWindow.webContents.setWindowOpenHandler((details) => {
--- a/src/renderer/splash.html
+++ b/src/renderer/splash.html
@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Splash</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />
+  </head>
+
+  <body id="root">
+    
+    <img alt="logo" class="logo" src='./src/assets/electron.svg' height="256px" width="256px" />
+
+    <style>
+        #root {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            margin: 0;
+            height: 350px;
+            width: 350px;
+        }
+        .logo {
+            -webkit-user-drag: none;
+            filter: drop-shadow(0 0 1.6em #6988e6aa);
+        }
+    </style>
+  </body>
+</html>