From 4a40bdfe89013a6a8e123fbaecad6fb7226d7d63 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 12 Sep 2024 14:33:44 +0200
Subject: [PATCH] fix(kanban): make task creation loading spinner actually
 visible

(cherry picked from commit 7e38a9f4428471492f5a654e39cc22507b4a77ba)
---
 .../components/project/views/ProjectKanban.vue   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index 5c8666725..931eae27b 100644
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@@ -547,6 +547,9 @@ async function updateTaskPosition(e) {
 }
 
 function toggleShowNewTaskInput(bucketId: IBucket['id']) {
+	if (loading.value || taskLoading.value) {
+		return
+	}
 	showNewTaskInput.value[bucketId] = !showNewTaskInput.value[bucketId]
 	newTaskInputFocused.value = false
 }
@@ -563,6 +566,7 @@ async function addTaskToBucket(bucketId: IBucket['id']) {
 		bucketId,
 		projectId: project.value.id,
 	})
+	toggleShowNewTaskInput(bucketId)
 	newTaskText.value = ''
 	kanbanStore.addTaskToBucket(task)
 	scrollTaskContainerToBottom(bucketId)
@@ -767,6 +771,18 @@ function unCollapseBucket(bucket: IBucket) {
 }
 </script>
 
+<style lang="scss" scoped>
+.control.is-loading {
+  &::after {
+    top: 30%;
+    right: 50%;
+    transform: translate(-50%, 0);
+	--loader-border-color: var(--grey-500);
+  }
+}
+</style>
+
+
 <style lang="scss">
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 $bucket-width: 300px;