feat(app): wrap blocking process with loading state

neutralino.config.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/neutralinojs/neutralinojs/main/schemas/neutralino.config.schema.json",
   "applicationId": "neu.js.nikkepwned",
-  "version": "2.3.2-indev",
+  "version": "2.3.3-indev",
   "applicationName": "NIKKEPwned",
   "author": "ScathachGrip",
   "description": "NIKKEPwned",

package.json

@@ -2,7 +2,7 @@
   "name": "nikkepwned",
   "description": "Password Manager for NIKKE",
   "funding": "https://github.com/sponsors/sinkaroid",
-  "version": "2.3.2-indev",
+  "version": "2.3.3-indev",
   "scripts": {
     "prebuild": "ts-node src/frontend.ts",
     "build": "tsc",

src/app.ts

@@ -1,4 +1,5 @@
 const staging = true;
+const externalLoading = true;
 let ws: WebSocket | null = null;
 let globalUser: string;
 
@@ -457,7 +458,6 @@ class PwnedManager {
     }, 3000);
   }
 
-
   /**
    * Converts a timestamp to a readable date and "time ago" format.
    * @param {number} timestamp - The timestamp stored with Date.now().
@@ -553,6 +553,47 @@ class PwnedManager {
     }
   }
 
+  private loadingImgs: string[] = [
+    "ext_load_1",
+    "ext_load_2",
+    "ext_load_3",
+    "ext_load_4",
+    "ext_load_5",
+  ];
+
+  private getRandomLoader(): string {
+    return this.loadingImgs[Math.floor(Math.random() * this.loadingImgs.length)];
+  }
+
+  /**
+   * Starts the loading animation and changes the cursor to "wait".
+   * This function updates the loading image to a random loader
+   * 
+   * @returns {void} No return value; only updates the windows UI.
+   */
+  public startLoading(): void {
+    document.body.style.cursor = "wait";
+    const img = document.getElementById("loadingImg") as HTMLImageElement | null;
+    if (img) {
+      img.src = `/static/loading/${this.getRandomLoader()}.webp`;
+    }
+
+    const el = document.getElementById("loading");
+    if (el) el.style.display = "flex";
+  }
+
+  /**
+   * Finishes the loading animation and resets the cursor to "default".
+   * This function hides the loading element and resets the cursor style.
+   * 
+   * @returns {void} No return value; only updates the windows UI.
+  */
+  public finishLoading(): void {
+    document.body.style.cursor = "default";
+    const el = document.getElementById("loading");
+    if (el) el.style.display = "none";
+  }
+
 }
 
 const accountManager = new PwnedManager();
@@ -820,6 +861,19 @@ Neutralino.events.on("ready", async () => {
           return;
         }
 
+        await new Promise(r => setTimeout(r, 0));
+
+        if (externalLoading) {
+          try {
+            accountManager.startLoading();
+            setTimeout(() => accountManager.finishLoading(), Number(getDelay) * 1000 || 3000);
+            console.log("loading jalan");
+          } catch (err: unknown) {
+            setTimeout(() => accountManager.finishLoading(), 3000);
+            console.log("loading gagal: " + (err as Error).message);
+          }
+        }
+
         console.log(`Opening NIKKE Launcher... (${launcherPath})`);
         await Neutralino.os.execCommand(
           `powershell -ExecutionPolicy Bypass -Command "Start-Process '${launcherPath}' -Verb RunAs"`,
@@ -1003,6 +1057,7 @@ Neutralino.events.on("ready", async () => {
   );
 });
 
+
 // Browser.events: DOMContentLoaded
 document.addEventListener("DOMContentLoaded", async () => {
   // Handling account selection
@@ -1028,7 +1083,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   const btnWortel = document.getElementById("myBtnWortel") as HTMLButtonElement;
   const spanWortel = myModalWortel.querySelector(".close") as HTMLElement;
 
-
   if (!modal || !btn || !span || !tbody || !myModalWortel || !btnWortel || !spanWortel) {
     console.error("❌ Modal elements not found.");
     return;

src/frontend.ts

@@ -1170,16 +1170,46 @@ const htmlContent = `
     #accountSelect {
       transition: all 0.3s ease;
     }
+
+   #loading {
+    position: fixed;
+    inset: 0;
+    background: var(--bg);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+  }
+
+  #loading img {
+    width: 130px;
+    height: 130px;
+    animation: bounceLoader 0.6s infinite alternate ease-out;
+  }
+
+  @keyframes bounceLoader {
+    0% {
+      transform: translateY(0) scale(1);
+    }
+    100% {
+      transform: translateY(-40px) scale(1.1);
+    }
+  }
   </style>
 </head>
 
+
 <head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>NikkePwned</title>
 </head>
 
+<div id="loading">
+  <img id="loadingImg" src="" />
+</div>
+
 <body>
   <div id="titlebar" class="titlebar">
     <div class="title-left">