From b851c72d53f74c0edbe29db6307135d91b07cdea Mon Sep 17 00:00:00 2001
From: Oliver Giles <ohw.giles@gmail.com>
Date: Fri, 20 Nov 2020 14:08:02 +1300
Subject: [PATCH] progress bar: fix initial delayed update

when the displayed frontend state changes, any progress bar
should begin in the initial correct state before smoothly
transitioning with time.
---
 src/resources/js/app.js | 5 ++++-
 src/resources/style.css | 1 -
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index fefa648..f0e518e 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -123,7 +123,10 @@ Vue.mixin({
       // - the current job has started (practically hard to reach)
       clearInterval(this.updateTimer);
       if (val.length) {
-        // TODO: first, a non-animated progress update
+        // set the current progress update first
+        this.jobsRunning.forEach(this.updateProgress);
+        this.$forceUpdate();
+        // then update with animation every second
         this.updateTimer = setInterval(() => {
           this.jobsRunning.forEach(this.updateProgress);
           this.$forceUpdate();
diff --git a/src/resources/style.css b/src/resources/style.css
index 1dcba48..ac2d9f3 100644
--- a/src/resources/style.css
+++ b/src/resources/style.css
@@ -165,7 +165,6 @@ button:not([disabled]) { cursor: pointer; color: var(--main-fg); }
 }
 .progress-bar {
  height: 100%;
- width: 100%;
  background-color: var(--running);
  background-image: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.18) 35% 65%, transparent 65%);
  background-size: 1rem;