From dac9d918b57d0fd0f60ea004a282922acda092d8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 19 Jul 2022 18:33:45 +0200
Subject: [PATCH] feat(kanban): show loading indicators when handling tasks

---
 src/store/modules/tasks.ts    | 5 +++--
 src/views/list/ListKanban.vue | 9 +++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/store/modules/tasks.ts b/src/store/modules/tasks.ts
index 209cdb95..1fc49984 100644
--- a/src/store/modules/tasks.ts
+++ b/src/store/modules/tasks.ts
@@ -5,7 +5,7 @@ import TaskAssigneeService from '@/services/taskAssignee'
 import TaskAssigneeModel from '../../models/taskAssignee'
 import LabelTaskModel from '../../models/labelTask'
 import LabelTaskService from '@/services/labelTask'
-import {HAS_TASKS} from '../mutation-types'
+import {HAS_TASKS, LOADING_MODULE} from '../mutation-types'
 import {setLoading} from '../helper'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 
@@ -286,12 +286,13 @@ export default {
 			return foundListId
 		},
 
-		async createNewTask({dispatch}, { 
+		async createNewTask({dispatch, commit}, { 
 			title,
 			bucketId,
 			listId,
 			position,
 		}) {
+			setLoading({commit}, 'tasks')
 			const parsedTask = parseTaskText(title, getQuickAddMagicMode())
 		
 			const foundListId = await dispatch('findListId', {
diff --git a/src/views/list/ListKanban.vue b/src/views/list/ListKanban.vue
index 33010dd6..ccaddd9a 100644
--- a/src/views/list/ListKanban.vue
+++ b/src/views/list/ListKanban.vue
@@ -140,10 +140,10 @@
 							<template #footer>
 								<div class="bucket-footer" v-if="canWrite">
 									<div class="field" v-if="showNewTaskInput[bucket.id]">
-										<div class="control" :class="{'is-loading': loading}">
+										<div class="control" :class="{'is-loading': loading || taskLoading}">
 											<input
 												class="input"
-												:disabled="loading || undefined"
+												:disabled="loading || taskLoading || undefined"
 												@focusout="toggleShowNewTaskInput(bucket.id)"
 												@keyup.enter="addTaskToBucket(bucket.id)"
 												@keyup.esc="toggleShowNewTaskInput(bucket.id)"
@@ -172,7 +172,7 @@
 
 							<template #item="{element: task}">
 								<div class="task-item">
-									<kanban-card class="kanban-card" :task="task"/>
+									<kanban-card class="kanban-card" :task="task" :loading="taskUpdating[task.id] ?? false"/>
 								</div>
 							</template>
 						</draggable>
@@ -424,6 +424,7 @@ export default defineComponent({
 			const task = newBucket.tasks[newTaskIndex]
 			const taskBefore = newBucket.tasks[newTaskIndex - 1] ?? null
 			const taskAfter = newBucket.tasks[newTaskIndex + 1] ?? null
+			this.taskUpdating[task.id] = true
 
 			const newTask = cloneDeep(task) // cloning the task to avoid vuex store mutations
 			newTask.bucketId = newBucket.id
@@ -463,7 +464,7 @@ export default defineComponent({
 				return
 			}
 			this.newTaskError[bucketId] = false
-
+			
 			const task = await this.$store.dispatch('tasks/createNewTask', {
 				title: this.newTaskText,
 				bucketId,