chore: Add loading animation in place of novnc while the container is starting (#513)

chore: Refactor 'InstallStates' into enum

Co-authored-by: Tibix <fuloptibi03@gmail.com>

Author: Levev

src/renderer/App.vue

@@ -202,7 +202,7 @@ onMounted(async () => {
         console.log("Not installed, redirecting to setup...");
         $router.push("/setup");
     }
-
+    
     // Apply or remove disable-animations class based on config
     const updateAnimationClass = () => {
         if (wbConfig?.config.disableAnimations) {

src/renderer/lib/install.ts

@@ -14,21 +14,19 @@ const remote: typeof import("@electron/remote") = require("@electron/remote");
 const argon2: typeof import("argon2") = require("argon2");
 const logger = createLogger(path.join(WINBOAT_DIR, "install.log"));
 
-export const InstallStates = {
-    IDLE: "Preparing",
-    CREATING_COMPOSE_FILE: "Creating Compose File",
-    CREATING_OEM: "Creating OEM Assets",
-    STARTING_CONTAINER: "Starting Container",
-    MONITORING_PREINSTALL: "Monitoring Preinstall",
-    INSTALLING_WINDOWS: "Installing Windows",
-    COMPLETED: "Completed",
-    INSTALL_ERROR: "Install Error",
-} as const;
-
-export type InstallState = (typeof InstallStates)[keyof typeof InstallStates];
+export enum InstallStates {
+    IDLE = "Preparing",
+    CREATING_COMPOSE_FILE = "Creating Compose File",
+    CREATING_OEM = "Creating OEM Assets",
+    STARTING_CONTAINER = "Starting Container",
+    MONITORING_PREINSTALL = "Monitoring Preinstall",
+    INSTALLING_WINDOWS = "Installing Windows",
+    COMPLETED = "Completed",
+    INSTALL_ERROR = "Install Error",
+};
 
 interface InstallEvents {
-    stateChanged: (state: InstallState) => void;
+    stateChanged: (state: InstallStates) => void;
     preinstallMsg: (msg: string) => void;
     error: (error: Error) => void;
     vncPortChanged: (port: number) => void;
@@ -37,7 +35,7 @@ interface InstallEvents {
 export class InstallManager {
     conf: InstallConfiguration;
     emitter: Emitter<InstallEvents>;
-    state: InstallState;
+    state: InstallStates;
     preinstallMsg: string;
     container: ContainerManager;
 
@@ -49,7 +47,7 @@ export class InstallManager {
         this.container = createContainer(conf.container);
     }
 
-    changeState(newState: InstallState) {
+    changeState(newState: InstallStates) {
         this.state = newState;
         this.emitter.emit("stateChanged", newState);
         logger.info(`New state: "${newState}"`);

src/renderer/views/SetupUI.vue

@@ -706,7 +706,19 @@
                         <p class="text-lg text-gray-400 text-justify">
                             WinBoat is now installing Windows. Please be patient as this may take up to an hour. In the
                             meantime, you can grab a coffee and check the installation status
-                            <a :href="`http://127.0.0.1:${vncPort}`" @click="openAnchorLink">in your browser</a>.
+                            <span v-if="linkableInstallSteps.includes(installState)">
+                                <a :href="`http://127.0.0.1:${vncPort}`" @click="openAnchorLink">in your browser</a>.
+                            </span>
+                            <span v-else>
+                                over at
+                                <div
+                                    style="animation-duration: 3s!important;"
+                                    class="ml-1 inline-block relative text-transparent rounded-md bg-neutral-700 animate-pulse select-none"
+                                >
+                                    in your browser
+                                    <Icon icon="eos-icons:three-dots-loading" class="pointer-events-none absolute top-0 left-[50%] size-16 text-violet-400 -translate-x-[50%] -translate-y-[27.5%]"></Icon>
+                                </div>
+                            </span>
                         </p>
 
                         <!-- Installing -->
@@ -777,7 +789,7 @@ import { computedAsync } from "@vueuse/core";
 import { InstallConfiguration, Specs } from "../../types";
 import { getSpecs, getMemoryInfo, defaultSpecs, satisfiesPrequisites, type MemoryInfo } from "../lib/specs";
 import { WINDOWS_VERSIONS, WINDOWS_LANGUAGES, type WindowsVersionKey } from "../lib/constants";
-import { InstallManager, type InstallState, InstallStates } from "../lib/install";
+import { InstallManager, InstallStates } from "../lib/install";
 import { openAnchorLink } from "../utils/openLink";
 import license from "../assets/LICENSE.txt?raw";
 import {
@@ -893,10 +905,12 @@ const username = ref("winboat");
 const password = ref("");
 const confirmPassword = ref("");
 const homeFolderSharing = ref(false);
-const installState = ref<InstallState>(InstallStates.IDLE);
+const installState = ref<InstallStates>(InstallStates.IDLE);
 const preinstallMsg = ref("");
 const containerRuntime = ref(ContainerRuntimes.DOCKER);
 const vncPort = ref(8006);
+// These are the install steps where the container is actually up and running
+const linkableInstallSteps = [ InstallStates.MONITORING_PREINSTALL, InstallStates.INSTALLING_WINDOWS, InstallStates.COMPLETED ];
 
 let installManager: InstallManager | null;