From a15b57c8ded4157e1ec9fe45b3021e21a707b922 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Tue, 23 Jan 2024 11:01:04 +0100
Subject: [PATCH] Statefile download progress bar improvements

---
 frontend/components/FetchProgress.js | 25 +++----------------------
 frontend/editor.css                  | 16 ++++++++++++++++
 frontend/editor.js                   |  4 +++-
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/frontend/components/FetchProgress.js b/frontend/components/FetchProgress.js
index 344d8f2355..f333ff380a 100644
--- a/frontend/components/FetchProgress.js
+++ b/frontend/components/FetchProgress.js
@@ -38,25 +38,6 @@ export const read_Uint8Array_with_progress = async (response, on_progress) => {
 export const FetchProgress = ({ progress }) =>
     progress == null || progress === 1
         ? null
-        : html`<div
-              style="
-              width: 200px;
-              height: 27px;
-              background: white;
-              border: 5px solid #d1d9e4;
-              border-radius: 6px;
-              position: fixed;
-              left: calc(50vw - 100px);
-              top: calc(50vh - 50px);
-              z-index: 300;
-              box-sizing: content-box;
-"
-          >
-              <div
-                  style=${{
-                      height: "100%",
-                      width: progress * 200 + "px",
-                      background: "rgb(117 135 177)",
-                  }}
-              ></div>
-          </div>`
+        : html`<progress class="statefile-fetch-progress" max="100" value=${progress === "indeterminate" ? undefined : Math.round(progress * 100)}>
+              ${progress === "indeterminate" ? null : Math.round(progress * 100)}%
+          </progress>`
diff --git a/frontend/editor.css b/frontend/editor.css
index 2fa1d47bb9..1b1c7271fe 100644
--- a/frontend/editor.css
+++ b/frontend/editor.css
@@ -854,6 +854,22 @@ nav#at_the_top > #process_status:empty {
     display: none;
 }
 
+.statefile-fetch-progress {
+    /* width: 200px;
+    height: 27px;
+    background: white;
+    border: 5px solid #d1d9e4;
+    border-radius: 6px; */
+    --w: min(80vw, 300px);
+    position: fixed;
+    left: calc(50vw - 0.5 * var(--w));
+    top: 0;
+    z-index: 300000;
+    /* box-sizing: content-box; */
+    /* height: 2rem; */
+    width: var(--w);
+}
+
 loading-bar {
     height: 6px;
     width: 10vw;
diff --git a/frontend/editor.js b/frontend/editor.js
index c1c201247c..42a73b6300 100644
--- a/frontend/editor.js
+++ b/frontend/editor.js
@@ -122,8 +122,10 @@ const get_statefile =
     // @ts-ignore
     window?.pluto_injected_environment?.custom_get_statefile?.(read_Uint8Array_with_progress, without_path_entries, unpack) ??
     (async (launch_params, set_statefile_download_progress) => {
+        set_statefile_download_progress("indeterminate")
         const r = await fetch(new Request(launch_params.statefile, { integrity: launch_params.statefile_integrity ?? undefined }))
-        const data = await read_Uint8Array_with_progress(r, set_statefile_download_progress)
+        set_statefile_download_progress(0.2)
+        const data = await read_Uint8Array_with_progress(r, (x) => set_statefile_download_progress(x * 0.8 + 0.2))
         const state = without_path_entries(unpack(data))
         return state
     })