Rename spinner to progress, add note

hrgdavor · Mar 15, 2024 · e6c683d · e6c683d
1 parent b2d062a
commit e6c683d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/apps/jscad-web/main.js b/apps/jscad-web/main.js
@@ -157,6 +157,16 @@ const exportModel = async (format, extension) => {
   }
 }
 
+const onProgress = ([value, note]) => {
+  const el = progress.querySelector('progress')
+  if (value == undefined) {
+    el.removeAttribute('value')
+  } else {
+    el.value = value
+  }
+  progress.querySelector('div').innerText = note ?? ''
+}
+
 const worker = new Worker('./build/bundle.worker.js')
 const handlers = {
   entities: ({ entities, mainTime, convertTime }) => {
@@ -165,20 +175,20 @@ const handlers = {
     console.log('Main execution:', mainTime?.toFixed(2), ', jscad mesh -> gl:', convertTime?.toFixed(2))
     setError(undefined)
   },
-  progress: ({ progress }) => spinner.value = progress,
+  onProgress,
 }
 const { sendCmd, sendNotify } = initMessaging(worker, handlers)
 
-const spinner = byId('spinner')
+const progress = byId('progress')
 let jobs = 0
 let firstJobTimer
 async function sendCmdAndSpin(method, params) {
   jobs++
   if (jobs === 1) {
-    // do not show spinner for fast renders
+    // do not show progress for fast renders
     firstJobTimer = setTimeout(() => {
-      spinner.style.display = 'block'
-      spinner.removeAttribute('value')
+      onProgress([])
+      progress.style.display = 'block'
     }, 300)
   }
   try {
@@ -189,7 +199,7 @@ async function sendCmdAndSpin(method, params) {
   } finally {
     if (--jobs === 0) {
       clearTimeout(firstJobTimer)
-      spinner.style.display = 'none'
+      progress.style.display = 'none'
     }
   }
 }

diff --git a/apps/jscad-web/static/index.html b/apps/jscad-web/static/index.html
@@ -44,7 +44,10 @@ <h1>JSCAD</h1>
 
         <div id="overlay">
           <div class="above-error">
-            <progress id="spinner" title="Processing..."></progress>
+            <div id="progress">
+              <div></div>
+              <progress title="Processing..."></progress>
+            </div>
 
             <div id="model-options">
               <div id="paramsDiv"></div>

diff --git a/apps/jscad-web/static/main.css b/apps/jscad-web/static/main.css
@@ -569,16 +569,20 @@ p {
   border-top-left-radius: 4px;
 }
 
-#spinner {
+#progress {
   position: absolute;
   bottom: 10px;
   right: 10px;
   display: none;
   accent-color: #27c;
 }
-.dark #spinner {
+.dark #progress {
   accent-color: #2e96ea;
 }
+#progress > div {
+  font-size: small;
+  text-align: right;
+}
 
 .above-error {
   flex: 1;