From c0130b2b488384fa17d985a168c542cb93fd7a27 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 8 Dec 2020 18:49:28 +0100
Subject: [PATCH] Only show a loading spinner per task when updating a task on
 the kanban board

---
 src/views/list/views/Kanban.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 2111a199..c135e912 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div :class="{ 'is-loading': loading}" class="kanban loader-container">
+		<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban loader-container">
 			<div :key="`bucket${bucket.id}`" class="bucket" v-for="bucket in buckets">
 				<div class="bucket-header">
 					<h2
@@ -90,8 +90,8 @@
 						>
 							<div
 								:class="{
-							'is-loading': taskService.loading && taskUpdating[task.id],
-							'draggable': !taskService.loading || !taskUpdating[task.id],
+							'is-loading': (taskService.loading || loading) && taskUpdating[task.id],
+							'draggable': !(taskService.loading || loading) || !taskUpdating[task.id],
 							'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
 						}"
 								:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
@@ -154,10 +154,10 @@
 				</div>
 				<div class="bucket-footer" v-if="canWrite">
 					<div class="field" v-if="showNewTaskInput[bucket.id]">
-						<div class="control" :class="{'is-loading': taskService.loading}">
+						<div class="control" :class="{'is-loading': taskService.loading || loading}">
 							<input
 								class="input"
-								:disabled="taskService.loading"
+								:disabled="taskService.loading || loading"
 								@focusout="toggleShowNewTaskInput(bucket.id)"
 								@keyup.enter="addTaskToBucket(bucket.id)"
 								@keyup.esc="toggleShowNewTaskInput(bucket.id)"
@@ -284,6 +284,7 @@ export default {
 
 			// We're using this to show the loading animation only at the task when updating it
 			taskUpdating: {},
+			oneTaskUpdating: false,
 		}
 	},
 	created() {
@@ -360,6 +361,7 @@ export default {
 				const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
 				const task = this.buckets[bucketIndex].tasks[taskIndex]
 				this.$set(this.taskUpdating, task.id, true)
+				this.oneTaskUpdating = true
 
 				// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
 				if (taskBefore === null && taskAfter !== null) {
@@ -382,10 +384,13 @@ export default {
 					})
 					.finally(() => {
 						this.$set(this.taskUpdating, task.id, false)
+						this.oneTaskUpdating = false
 					})
 			}
 		},
 		markTaskAsDone(task) {
+			this.oneTaskUpdating = true
+			this.$set(this.taskUpdating, task.id, true)
 			task.done = !task.done
 			this.$store.dispatch('tasks/update', task)
 				.catch(e => {
@@ -393,6 +398,7 @@ export default {
 				})
 				.finally(() => {
 					this.$set(this.taskUpdating, task.id, false)
+					this.oneTaskUpdating = false
 				})
 		},
 		getTaskPayload(bucketId) {