see model after vote

src/routes/Vote.svelte

@@ -24,6 +24,9 @@
     let overlayB: HTMLDivElement;
     let loadingBarFillA: HTMLDivElement;
     let loadingBarFillB: HTMLDivElement;
+    let voteOverlay: boolean = false;
+    let voteOverlayA: HTMLDivElement;
+    let voteOverlayB: HTMLDivElement;
     let statusMessage: string = "Loading...";
     let errorMessage: string = "";
     let data: Data;
@@ -100,8 +103,9 @@
     }
 
     async function vote(option: "A" | "B") {
-        statusMessage = "Processing vote...";
-        errorMessage = "";
+        voteOverlay = true;
+        voteOverlayA.classList.add("show");
+        voteOverlayB.classList.add("show");
 
         const payload = {
             username: getUsername(),
@@ -111,6 +115,8 @@
         };
         const url = `https://dylanebert-3d-arena-backend.hf.space/vote`;
 
+        const startTime = Date.now();
+
         try {
             const response = await fetch(url, {
                 method: "POST",
@@ -122,10 +128,18 @@
                 body: JSON.stringify(payload),
             });
 
+            const elapsedTime = Date.now() - startTime;
+            const remainingTime = Math.max(1200 - elapsedTime, 0);
+
             if (response.ok) {
                 const result = await response.json();
                 console.log(result);
-                loadScenes();
+                setTimeout(() => {
+                    voteOverlayA.classList.remove("show");
+                    voteOverlayB.classList.remove("show");
+                    voteOverlay = false;
+                    loadScenes();
+                }, remainingTime);
             } else {
                 errorMessage = "Failed to process vote.";
             }
@@ -135,6 +149,10 @@
         }
     }
 
+    function skip() {
+        loadScenes();
+    }
+
     function handleResize() {
         requestAnimationFrame(() => {
             if (canvasA && containerA) {
@@ -184,6 +202,7 @@
                     <div bind:this={loadingBarFillA} class="loading-bar-fill" />
                 </div>
             </div>
+            <div bind:this={voteOverlayA} class="vote-overlay">{data.model1}</div>
             <canvas bind:this={canvasA} class="viewer-canvas" id="canvas1"> </canvas>
             <div class="stats">
                 {#if viewerA}
@@ -218,6 +237,7 @@
                     <div bind:this={loadingBarFillB} class="loading-bar-fill" />
                 </div>
             </div>
+            <div bind:this={voteOverlayB} class="vote-overlay">{data.model2}</div>
             <canvas bind:this={canvasB} class="viewer-canvas" id="canvas2"></canvas>
             <div class="stats">
                 {#if viewerB}
@@ -247,11 +267,13 @@
             </div>
         </div>
     </div>
-    <div class="vote-buttons-container">
-        <button class="vote-button" on:click={() => vote("A")}>A is Better</button>
-        <button class="vote-button" on:click={() => vote("B")}>B is Better</button>
-    </div>
-    <div class="skip-container">
-        <button class="vote-button" on:click={() => loadScenes()}>Skip</button>
-    </div>
+    {#if !voteOverlay}
+        <div class="vote-buttons-container">
+            <button class="vote-button" on:click={() => vote("A")}>A is Better</button>
+            <button class="vote-button" on:click={() => vote("B")}>B is Better</button>
+        </div>
+        <div class="skip-container">
+            <button class="vote-button" on:click={() => skip()}>Skip</button>
+        </div>
+    {/if}
 {/if}

static/global.css

@@ -129,6 +129,28 @@ body {
     font-size: 16px;
 }
 
+.vote-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0, 0, 0, 0);
+    color: rgba(255, 255, 255, 0);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 110;
+    transition: background-color 0.1s ease, color 0.1s ease;
+    pointer-events: none;
+}
+
+.vote-overlay.show {
+    background-color: rgb(0, 0, 0, 1);
+    color: rgba(255, 255, 255, 1);
+}
+
 .loading-bar {
     position: relative;
     width: 256px;