From 76664363dc4be69afbf0d7986365f7df8c4f26c7 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 22 Jul 2020 16:40:46 +0100
Subject: [PATCH] Show indeterminate progress as soon as action is requested

---
 .../genericComponents/taskSubmitter.vue           | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue b/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
index da5e695d..488f0ed8 100644
--- a/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
+++ b/openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="uk-margin-remove uk-padding-remove">
-    <div v-if="taskRunning" ref="isPollingElement">
+    <div v-if="taskStarted" ref="isPollingElement">
       <div class="progress uk-margin-small">
         <div
           v-if="progress"
@@ -11,7 +11,7 @@
       </div>
 
       <button
-        v-if="canTerminate"
+        v-if="canTerminate && taskRunning"
         type="button"
         class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
         @click="terminateTask()"
@@ -23,7 +23,7 @@
     <div>
       <button
         type="button"
-        :hidden="taskRunning"
+        :hidden="taskStarted"
         class="uk-button uk-margin-remove uk-width-1-1"
         :class="[buttonPrimary ? 'uk-button-primary' : 'uk-button-default']"
         @click="bootstrapTask()"
@@ -92,6 +92,7 @@ export default {
       taskId: null,
       polling: null,
       progress: null,
+      taskStarted: false,
       taskRunning: false
     };
   },
@@ -140,6 +141,8 @@ export default {
       this.$emit("submit", this.submitData);
       // Send a request to start a task
       console.log("Submitting to ", this.submitUrl);
+      this.taskStarted = true;
+      this.$emit("taskStarted", this.taskId);
       axios
         .post(this.submitUrl, this.submitData)
         // Get the returned Task ID
@@ -149,10 +152,13 @@ export default {
           this.taskId = response.data.id;
           // Start the store polling TaskId for success
           this.taskRunning = true;
-          this.$emit("taskStarted", this.taskId);
+          this.$emit("taskRunning", this.taskId);
           // Return the poll-task promise (starts polling the task)
           return this.pollTask(this.taskId, this.pollInterval);
         })
+        .catch(() => {
+          this.taskStarted = false;
+        })
         .then(response => {
           // Do something with the final response
           console.log("Emitting onResponse: ", response);
@@ -171,6 +177,7 @@ export default {
           console.log("Cleaning up after task.");
           // Reset taskRunning and taskId
           this.taskRunning = false;
+          this.taskStarted = false;
           this.taskId = null;
           // Update the form data if we're self-updating
           if (this.selfUpdate) {