Fix loading state for kanban board

src/components/lists/views/Kanban.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="kanban loader-container" :class="{ 'is-loading': bucketService.loading}">
+	<div class="kanban loader-container" :class="{ 'is-loading': loading}">
 		<div v-for="bucket in buckets" :key="`bucket${bucket.id}`" class="bucket">
 			<div class="bucket-header">
 				<h2
@@ -140,7 +140,7 @@
 			</div>
 		</div>
 
-		<div class="bucket new-bucket" v-if="!bucketService.loading">
+		<div class="bucket new-bucket" v-if="!loading">
 			<input
 					v-if="showNewBucketInput"
 					class="input"
@@ -151,8 +151,8 @@
 					@keyup.esc="() => showNewBucketInput = false"
 					@keyup.enter="createNewBucket"
 					v-model="newBucketTitle"
-					:disabled="bucketService.loading"
-					:class="{'is-loading': bucketService.loading}"
+					:disabled="loading"
+					:class="{'is-loading': loading}"
 			/>
 			<a
 					class="button noshadow is-transparent is-fullwidth has-text-centered"
@@ -186,7 +186,6 @@
 </template>
 
 <script>
-	import BucketService from '../../../services/bucket'
 	import TaskService from '../../../services/task'
 	import TaskModel from '../../../models/task'
 	import BucketModel from '../../../models/bucket'
@@ -199,6 +198,7 @@
 	import {filterObject} from '../../../helpers/filterObject'
 	import {applyDrag} from '../../../helpers/applyDrag'
 	import {mapState} from 'vuex'
+	import {LOADING} from '../../../store/mutation-types'
 
 	export default {
 		name: 'Kanban',
@@ -211,7 +211,6 @@
 		},
 		data() {
 			return {
-				bucketService: BucketService,
 				taskService: TaskService,
 
 				dropPlaceholderOptions: {
@@ -235,13 +234,13 @@
 			}
 		},
 		created() {
-			this.bucketService = new BucketService()
 			this.taskService = new TaskService()
 			this.loadBuckets()
 			setTimeout(() => document.addEventListener('click', this.closeBucketDropdowns), 0)
 		},
 		computed: mapState({
 			buckets: state => state.kanban.buckets,
+			loading: LOADING,
 		}),
 		methods: {
 			loadBuckets() {

src/store/helper.js

@@ -0,0 +1,11 @@
+import {LOADING} from './mutation-types'
+
+export const setLoading = context => {
+	const timeout = setTimeout(() => {
+		context.commit(LOADING, true, {root: true})
+	}, 100)
+	return () => {
+		clearTimeout(timeout)
+		context.commit(LOADING, false, {root: true})
+	}
+}

src/store/modules/kanban.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 
 import BucketService from '../../services/bucket'
 import {filterObject} from '../../helpers/filterObject'
+import {setLoading} from '../helper'
 
 /**
  * This store is intended to hold the currently active kanban view.
@@ -89,6 +90,11 @@ export default {
 	},
 	actions: {
 		loadBucketsForList(ctx, listId) {
+			const cancel = setLoading(ctx)
+
+			// Clear everything to prevent having old buckets in the list if loading the buckets from this list takes a few moments
+			ctx.commit('setBuckets', [])
+
 			const bucketService = new BucketService()
 			return bucketService.getAll({listId: listId})
 				.then(r => {
@@ -98,8 +104,13 @@ export default {
 				.catch(e => {
 					return Promise.reject(e)
 				})
+				.finally(() => {
+					cancel()
+				})
 		},
 		createBucket(ctx, bucket) {
+			const cancel = setLoading(ctx)
+
 			const bucketService = new BucketService()
 			return bucketService.create(bucket)
 				.then(r => {
@@ -109,8 +120,13 @@ export default {
 				.catch(e => {
 					return Promise.reject(e)
 				})
+				.finally(() => {
+					cancel()
+				})
 		},
 		deleteBucket(ctx, bucket) {
+			const cancel = setLoading(ctx)
+
 			const bucketService = new BucketService()
 			return bucketService.delete(bucket)
 				.then(r => {
@@ -122,8 +138,13 @@ export default {
 				.catch(e => {
 					return Promise.reject(e)
 				})
+				.finally(() => {
+					cancel()
+				})
 		},
 		updateBucket(ctx, bucket) {
+			const cancel = setLoading(ctx)
+
 			const bucketService = new BucketService()
 			return bucketService.update(bucket)
 				.then(r => {
@@ -136,6 +157,9 @@ export default {
 				.catch(e => {
 					return Promise.reject(e)
 				})
+				.finally(() => {
+					cancel()
+				})
 		},
 	},
 }