feat: progress bar and trying to animate

src/main/events/autoupdater/check-for-updates.ts

@@ -65,11 +65,11 @@ const checkForUpdates = async (_event: Electron.IpcMainInvokeEvent) => {
           total: total,
           delta: 123,
           transferred: (total * i) / 5,
-          percent: (total * i) / 5 / total,
+          percent: ((total * i) / 5 / total) * 100,
           bytesPerSecond: 4568,
         },
       });
-      await sleep(500);
+      await sleep(1000);
     }
 
     sendEvent({ type: "update-downloaded" });

src/main/services/window-manager.ts

@@ -57,8 +57,8 @@ export class WindowManager {
     if (this.splashWindow) return;
 
     this.splashWindow = new BrowserWindow({
-      width: 400,
+      width: 380,
-      height: 400,
+      height: 380,
       frame: false,
       alwaysOnTop: false,
       webPreferences: {

src/renderer/src/pages/splash/splash.css.ts

@@ -1,12 +1,11 @@
 import { style } from "@vanilla-extract/css";
-import { SPACING_UNIT } from "../../theme.css";
+import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const main = style({
   width: "100%",
   height: "100%",
   display: "flex",
   flexDirection: "column",
-  gap: `${SPACING_UNIT * 3}px`,
   padding: `${SPACING_UNIT * 3}px`,
   flex: "1",
   overflowY: "auto",
@@ -14,5 +13,41 @@ export const main = style({
 });
 
 export const splashIcon = style({
-  width: "250px",
+  width: "75%",
+});
+
+export const updateInfoSection = style({
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT * 2}px`,
+  flex: "1",
+  overflowY: "auto",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+export const progressBarContainer = style({
+  width: "100%",
+  height: "18px",
+  borderRadius: "24px",
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  justifyContent: "center",
+  backgroundColor: vars.color.darkBackground,
+  border: `solid 1px ${vars.color.border}`,
+  overflow: "hidden",
+});
+
+export const progressBarFill = style({
+  position: "absolute",
+  transition: "width 0.1s",
+  height: "100%",
+  left: 0,
+  background: vars.color.background,
+});
+
+export const progressBarText = style({
+  zIndex: 2,
 });

src/renderer/src/pages/splash/splash.tsx

@@ -16,14 +16,9 @@ export default function Splash() {
     console.log("subscribing");
     const unsubscribe = window.electron.onAutoUpdaterEvent(
       (event: AppUpdaterEvents) => {
-        console.log("event from screen: " + event.type);
         setStatus(event);
+
         switch (event.type) {
-          case "download-progress":
-            console.log(event.info);
-            break;
-          case "checking-for-updates":
-            break;
           case "error":
             window.electron.continueToMainWindow();
             break;
@@ -55,14 +50,24 @@ export default function Splash() {
       case "download-progress":
         return (
           <>
-            <p>Baixando atualização {newVersion}</p>
+            <p>Baixando versão {newVersion}</p>
-            <p>{status.info.percent.toFixed(2)} %</p>
+            <div className={styles.progressBarContainer}>
+              <div
+                className={styles.progressBarFill}
+                style={{ width: `${status.info.percent}%` }}
+              ></div>
+              <span className={styles.progressBarText}>
+                {status.info.percent.toFixed(2)} %
+              </span>
+            </div>
           </>
         );
       case "checking-for-updates":
         return <p>Buscando atualizações</p>;
       case "update-available":
-        return <p>Atualização {status.info.version} encontrada</p>;
+        return <p>Versão {status.info.version} encontrada</p>;
+      case "update-downloaded":
+        return <p>Reiniciando e aplicando atualização</p>;
       default:
         return <></>;
     }
@@ -70,8 +75,8 @@ export default function Splash() {
 
   return (
     <main className={styles.main}>
-      <img src={icon} className={styles.splashIcon} alt="" />
+      <img src={icon} className={styles.splashIcon} alt="Hydra Logo" />
-      {renderSwitch()}
+      <section className={styles.updateInfoSection}>{renderSwitch()}</section>
     </main>
   );
 }