add loading page on startup

app.js

@@ -21,7 +21,8 @@ const run = () => {
 
         mainWindow = createWindow();
         mainWindow.on('show', async () => {
-            await doUpdateCheck(mainWindow);
+            await updateConfigVars(mainWindow);
+            await tryLogin(mainWindow);
         })
         app.on('activate', function () {
             if (BrowserWindow.getAllWindows().length === 0) mainWindow = createWindow();
@@ -89,6 +90,25 @@ const run = () => {
     })
 }
 
+async function updateConfigVars(window) {
+    const osuPath = JSON.stringify(config.get("osuPath", ""));
+    window.webContents.send('config_update', {
+        osuPath: osuPath
+    })
+}
+
+async function tryLogin(window) {
+    const username = config.get("username", "");
+    const password = config.get("password", "");
+    if ((username && username.length > 0) && (password && password.length > 0)) {
+
+    } else {
+        window.webContents.send('account_update', {
+            type: "not-loggedin"
+        })
+    }
+}
+
 async function doUpdateCheck(window) {
     const osuPath = await config.get("osuPath", "");
     const isValid = await osuUtil.isValidOsuFolder(osuPath);

assets/launcher.css

@@ -23,6 +23,7 @@
     width: 100%;
 }
 
+.loading-section,
 .login-section {
     margin-top: 35px;
     display: flex;
@@ -31,6 +32,21 @@
     align-items: center;
 }
 
+.loading-section {
+    margin-top: 0;
+}
+
+.loading-section {}
+
+.loading-indicator {}
+
+.loading-indicator-text {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+}
+
 .folder-section {
     margin-top: 80px;
     display: flex;
@@ -164,4 +180,126 @@
 
 .clickable {
     cursor: pointer;
+}
+
+.loader {
+    position: relative;
+    margin: 0px auto;
+    width: 200px;
+    height: 200px;
+    transform: scale(0.5);
+}
+
+.loader:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+}
+
+.circular-loader {
+    -webkit-animation: rotate 2s linear infinite;
+    animation: rotate 2s linear infinite;
+    height: 100%;
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: auto;
+}
+
+.loader-path {
+    stroke-dasharray: 150, 200;
+    stroke-dashoffset: -10;
+    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    stroke-linecap: round;
+}
+
+@-webkit-keyframes rotate {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes rotate {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+}
+
+@-webkit-keyframes color {
+    0% {
+        stroke: #fff;
+    }
+
+    40% {
+        stroke: #fff;
+    }
+
+    66% {
+        stroke: #fff;
+    }
+
+    80%,
+    90% {
+        stroke: #fff;
+    }
+}
+
+@keyframes color {
+    0% {
+        stroke: #fff;
+    }
+
+    40% {
+        stroke: #fff;
+    }
+
+    66% {
+        stroke: #fff;
+    }
+
+    80%,
+    90% {
+        stroke: #fff;
+    }
 }

html/index.html

@@ -25,7 +25,26 @@
                 <div class="launcher-window position-relative overflow-hidden">
                     <div class="container px-1 py-2 w-100 mw-100 h-100">
                         <div class="row d-flex justify-content-center align-items-center h-100">
-                            <div id="launch-page" class="sections col col-xl-10">
+                            <div id="loading-page" class="sections col col-xl-10">
+                                <div class="launch-section flex-row">
+                                    <div class="server-logo">
+                                        <img src="../assets/logo.png" height="120">
+                                    </div>
+                                    <div class="app-name">EZPPLauncher</div>
+                                </div>
+                                <div class="loading-section">
+                                    <div class="loading-indicator">
+                                        <div class="loader">
+                                            <svg class="circular-loader" viewBox="25 25 50 50">
+                                                <circle class="loader-path" cx="50" cy="50" r="20" fill="none"
+                                                    stroke="#fff" stroke-width="2" />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                    <div class="loading-indicator-text">Loading... Please wait</div>
+                                </div>
+                            </div>
+                            <div id="launch-page" class="sections col col-xl-10" style="display: none;">
                                 <div class="account-section">
                                     <div class="user-image">
                                         <img id="user-img" src="https://a.ez-pp.farm/0">

preload/preload.js

@@ -3,6 +3,8 @@ const { Titlebar, Color } = require('custom-electron-titlebar');
 const appInfo = require('../appInfo');
 let titlebar;
 
+const currentPage = "loading-page";
+
 window.addEventListener('DOMContentLoaded', () => {
     titlebar = new Titlebar({
         backgroundColor: Color.fromHex("#303030"),
@@ -82,6 +84,14 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    ipcRenderer.on('account_update', (event, data) => {
+        switch (data.type) {
+            case "not-loggedin":
+                changePage("launch");
+                break;
+        }
+    })
+
     ipcRenderer.on('status_update', (event, status) => {
         currentState = status.type;
         switch (status.type) {
@@ -118,18 +128,9 @@ window.addEventListener('DOMContentLoaded', () => {
     })
 
     function changePage(page) {
-        switch (page) {
+        $(`#${currentPage}`).fadeOut(50, "swing", () => {
-            case "login":
+            $(`#${page}-page`).fadeIn(350);
-                $("#launch-page").fadeOut(50, "swing", () => {
+        });
-                    $("#login-page").fadeIn(350);
-                });
-                break;
-            case "launch":
-                $("#login-page").fadeOut(50, "swing", () => {
-                    $("#launch-page").fadeIn(350);
-                });
-                break;
-        }
     }
 
     // workaround for the dark theme