Handle backup task start/stop states

dashboard/src/components/BackupList.vue

@@ -127,7 +127,11 @@ async function refreshBackups() {
 }
 
 const startBackupError = ref('');
+const startBackupBusy = ref(false);
+
 async function onStartBackup() {
+  startBackupBusy.value = true;
+
   const [error] = await backupsModel.create();
   if (error) {
     if (error.status === 409) {
@@ -139,11 +143,21 @@ async function onStartBackup() {
   }
 
   await refreshTasks();
+
+  startBackupBusy.value = false;
 }
 
+const stopBackupBusy = ref(false);
+
 async function onStopBackup() {
+  stopBackupBusy.value = true;
+
   const [error] = await tasksModel.stop(lastTask.value.id);
   if (error) return console.error(error);
+
+  await refreshTasks();
+
+  stopBackupBusy.value = false;
 }
 
 async function onDownloadConfig(backup) {
@@ -302,15 +316,19 @@ onMounted(async () => {
       </template>
     </TableView>
 
+    <br/>
+
     <div v-if="lastTask.active">
       <ProgressBar :value="lastTask.percent" />
       <div>{{ lastTask.message }}</div>
+      <br/>
     </div>
 
     <div class="button-bar">
-      <Button danger @click="onStopBackup()" v-if="lastTask.active">{{ $t('backups.listing.stopTask') }}</Button>
-      <Button @click="onStartBackup()" v-else>{{ $t('backups.listing.backupNow') }}</Button>
+      <Button danger @click="onStopBackup()" v-if="lastTask.active" :loading="stopBackupBusy" :disabled="stopBackupBusy">{{ $t('backups.listing.stopTask') }}</Button>
+      <Button @click="onStartBackup()" v-else :loading="startBackupBusy" :disabled="startBackupBusy">{{ $t('backups.listing.backupNow') }}</Button>
+
+      <div class="error-label" v-if="startBackupError">{{ startBackupError }}</div>
     </div>
-    <div class="text-danger" v-if="startBackupError">{{ startBackupError }}</div>
   </Section>
 </template>