Merge pull request #282 from kubeshop/catalinhoha/feature/splashscreen

feat: show splashscreen before main window loads
kubeshop · Aug 23, 2021 · 598de88 · 598de88
2 parents 7d957e7 + 279bb18
commit 598de88
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 2 deletions.
diff --git a/electron/main.ts b/electron/main.ts
@@ -4,6 +4,7 @@ import * as isDev from 'electron-is-dev';
 import installExtension, {REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS} from 'electron-devtools-installer';
 import {execSync} from 'child_process';
 import * as ElectronLog from 'electron-log';
+import * as Splashscreen from '@trodi/electron-splashscreen';
 
 import {APP_MIN_HEIGHT, APP_MIN_WIDTH} from '../src/constants/constants';
 
@@ -60,7 +61,7 @@ ipcMain.on('run-helm', (event, args: any) => {
 
 function createWindow() {
   const image = nativeImage.createFromPath(path.join(app.getAppPath(), '/public/icon.ico'));
-  const win = new BrowserWindow({
+  const mainBrowserWindowOptions: Electron.BrowserWindowConstructorOptions = {
     width: 1200,
     height: 800,
     minWidth: APP_MIN_WIDTH,
@@ -74,7 +75,21 @@ function createWindow() {
       nodeIntegrationInWorker: true, // <---  for web workers
       preload: path.join(__dirname, 'preload.js'),
     },
-  });
+  };
+  const splashscreenConfig: Splashscreen.Config = {
+    windowOpts: mainBrowserWindowOptions,
+    templateUrl: isDev
+      ? path.normalize(`${__dirname}/../../public/Splashscreen.html`)
+      : path.normalize(`${__dirname}/../Splashscreen.html`),
+    delay: 0,
+    splashScreenOpts: {
+      width: 1200,
+      height: 800,
+      backgroundColor: 'black',
+    },
+  };
+
+  const win: BrowserWindow = Splashscreen.initSplashScreen(splashscreenConfig);
 
   if (isDev) {
     win.loadURL('http://localhost:3000/index.html');

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "@kubernetes/client-node": "0.15.0",
     "@rjsf/antd": "3.1.0",
     "@rjsf/core": "3.1.0",
+    "@trodi/electron-splashscreen": "1.0.2",
     "antd": "4.16.12",
     "chokidar": "3.5.2",
     "dagre": "0.8.5",

diff --git a/public/Splashscreen.html b/public/Splashscreen.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<html>
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'Source Sans Pro', sans-serif;
+      }
+      @keyframes loading-dots-1 {
+        from {
+          opacity: 0;
+        }
+        25% {
+          opacity: 1;
+        }
+      }
+      @keyframes loading-dots-2 {
+        from {
+          opacity: 0;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
+      @keyframes loading-dots-3 {
+        from {
+          opacity: 0;
+        }
+        75% {
+          opacity: 1;
+        }
+      }
+      .loading-dots span {
+        animation: loading-dots-1 1s infinite steps(1);
+      }
+      .loading-dots span:first-child + span {
+        animation-name: loading-dots-2;
+      }
+      .loading-dots span:first-child + span + span {
+        animation-name: loading-dots-3;
+      }
+      .container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      .loading-text {
+        color: white;
+        font-size: 18px;
+      }
+      .kubeshop-text {
+        color: white;
+        margin-right: 5px;
+        font-size: 14px;
+      }
+      .kubeshop-logo {
+        position: absolute;
+        bottom: 30px;
+        right: 30px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M39.8767 79.7535C61.9 79.7535 79.7535 61.9 79.7535 39.8767C79.7535 17.8534 61.9 0 39.8767 0C17.8534 0 -1.14441e-05 17.8534 -1.14441e-05 39.8767C-1.14441e-05 61.9 17.8534 79.7535 39.8767 79.7535ZM35.446 62.0305C50.1282 62.0305 62.0305 50.1282 62.0305 35.446C62.0305 20.7638 50.1282 8.8615 35.446 8.8615C20.7638 8.8615 8.86148 20.7638 8.86148 35.446C8.86148 50.1282 20.7638 62.0305 35.446 62.0305Z"
+          fill="url(#paint0_linear)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear"
+            x1="14.6215"
+            y1="9.03872"
+            x2="64.3345"
+            y2="68.7209"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#1890FF" />
+            <stop offset="1" stop-color="#5CDBD3" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <p class="loading-text loading-dots">Monokle is starting<span>.</span><span>.</span><span>.</span></p>
+    </div>
+    <div class="kubeshop-logo">
+      <span class="kubeshop-text">by Kubeshop</span>
+      <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M21.2019 3.6208L24.8227 10.1079L18.1026 6.72015L14.7148 0L21.2019 3.6208Z" fill="#5A5A5A" />
+        <path d="M18.1026 6.72012L23.0407 16.3804L12.9143 11.9084L8.44232 1.78201L18.1026 6.72012Z" fill="#5A5A5A" />
+        <path d="M8.44594 1.77838L12.9142 11.9084L4.16094 20.6617L0.858032 9.83245L8.44594 1.77838Z" fill="white" />
+        <path d="M14.7148 0L18.1 6.72268L11.5641 3.37899L14.7148 0Z" fill="white" />
+        <path d="M24.8227 10.1079L18.1 6.72269L23.095 11.7177L24.8227 10.1079Z" fill="#303030" />
+        <path d="M23.095 11.7177L18.1 6.72269L21.4426 13.2496L23.095 11.7177Z" fill="#1F1F1F" />
+        <path d="M12.9143 11.9084L23.0446 16.377L14.9554 24L4.12585 20.6969L12.9143 11.9084Z" fill="#303030" />
+      </svg>
+    </div>
+  </body>
+</html>