From e44be61d2a0074c76d674b89cbe8da5eb86c90f3 Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Sat, 9 Jan 2021 14:24:06 +0000
Subject: [PATCH] Fix loading states for unrelated components (#370)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/370
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
---
 src/components/home/navigation.vue |  4 ++--
 src/store/helper.js                | 13 +++++++++++--
 src/store/index.js                 |  5 +++++
 src/store/modules/kanban.js        |  8 ++++----
 src/store/modules/namespaces.js    |  5 +----
 src/store/modules/tasks.js         |  2 +-
 src/store/mutation-types.js        |  1 +
 src/views/list/views/Kanban.vue    |  9 +++++----
 8 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index bf3cb2925..0b491031e 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -133,7 +133,7 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
+import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
 export default {
 	name: 'navigation',
@@ -145,7 +145,7 @@ export default {
 		currentList: CURRENT_LIST,
 		background: 'background',
 		menuActive: MENU_ACTIVE,
-		loading: state => state.namespaces.loading,
+		loading: state => state[LOADING] && state[LOADING_MODULE] === 'namespaces',
 	}),
 	beforeCreate() {
 		this.$store.dispatch('namespaces/loadNamespaces')
diff --git a/src/store/helper.js b/src/store/helper.js
index 7772868d1..c1631361a 100644
--- a/src/store/helper.js
+++ b/src/store/helper.js
@@ -1,9 +1,17 @@
-import {LOADING} from './mutation-types'
+import {LOADING, LOADING_MODULE} from './mutation-types'
 
-export const setLoading = (context, loadFunc = null) => {
+/**
+ * This helper sets the loading state with a 100ms delay to avoid flickering.
+ * 
+ * @param {*} context The vuex module context.
+ * @param {null|String} module The module that is loading. This parameter allows components to listen for specific parts of the application loading.
+ * @param {null|function} loadFunc If not null, this function will be executed instead of the default setting loading.
+ */
+export const setLoading = (context, module = null, loadFunc = null) => {
 	const timeout = setTimeout(() => {
 		if (loadFunc === null) {
 			context.commit(LOADING, true, {root: true})
+			context.commit(LOADING_MODULE, module, {root: true})
 		} else {
 			loadFunc(true)
 		}
@@ -12,6 +20,7 @@ export const setLoading = (context, loadFunc = null) => {
 		clearTimeout(timeout)
 		if (loadFunc === null) {
 			context.commit(LOADING, false, {root: true})
+			context.commit(LOADING_MODULE, null, {root: true})
 		} else {
 			loadFunc(false)
 		}
diff --git a/src/store/index.js b/src/store/index.js
index 5fa8da497..181e161c7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,6 +7,7 @@ import {
 	IS_FULLPAGE,
 	KEYBOARD_SHORTCUTS_ACTIVE,
 	LOADING,
+	LOADING_MODULE,
 	MENU_ACTIVE,
 	ONLINE,
 } from './mutation-types'
@@ -35,6 +36,7 @@ export const store = new Vuex.Store({
 	},
 	state: {
 		loading: false,
+		loadingModule: null,
 		errorMessage: '',
 		online: true,
 		isFullpage: false,
@@ -49,6 +51,9 @@ export const store = new Vuex.Store({
 		[LOADING](state, loading) {
 			state.loading = loading
 		},
+		[LOADING_MODULE](state, module) {
+			state.loadingModule = module
+		},
 		[ERROR_MESSAGE](state, error) {
 			state.errorMessage = error
 		},
diff --git a/src/store/modules/kanban.js b/src/store/modules/kanban.js
index b4de07c79..97a679511 100644
--- a/src/store/modules/kanban.js
+++ b/src/store/modules/kanban.js
@@ -114,7 +114,7 @@ export default {
 	},
 	actions: {
 		loadBucketsForList(ctx, {listId, params}) {
-			const cancel = setLoading(ctx)
+			const cancel = setLoading(ctx, 'kanban')
 
 			// Clear everything to prevent having old buckets in the list if loading the buckets from this list takes a few moments
 			ctx.commit('setBuckets', [])
@@ -134,7 +134,7 @@ export default {
 				})
 		},
 		createBucket(ctx, bucket) {
-			const cancel = setLoading(ctx)
+			const cancel = setLoading(ctx, 'kanban')
 
 			const bucketService = new BucketService()
 			return bucketService.create(bucket)
@@ -150,7 +150,7 @@ export default {
 				})
 		},
 		deleteBucket(ctx, bucket) {
-			const cancel = setLoading(ctx)
+			const cancel = setLoading(ctx, 'kanban')
 
 			const bucketService = new BucketService()
 			return bucketService.delete(bucket)
@@ -168,7 +168,7 @@ export default {
 				})
 		},
 		updateBucket(ctx, bucket) {
-			const cancel = setLoading(ctx)
+			const cancel = setLoading(ctx, 'kanban')
 
 			const bucketService = new BucketService()
 			return bucketService.update(bucket)
diff --git a/src/store/modules/namespaces.js b/src/store/modules/namespaces.js
index 529bd952b..738a47223 100644
--- a/src/store/modules/namespaces.js
+++ b/src/store/modules/namespaces.js
@@ -7,7 +7,6 @@ export default {
 	namespaced: true,
 	state: () => ({
 		namespaces: [],
-		loading: false,
 	}),
 	mutations: {
 		namespaces(state, namespaces) {
@@ -97,9 +96,7 @@ export default {
 	},
 	actions: {
 		loadNamespaces(ctx) {
-			const cancel = setLoading(ctx, status => {
-				ctx.commit('loading', status, {root: true})
-			})
+			const cancel = setLoading(ctx, 'namespaces')
 
 			const namespaceService = new NamespaceService()
 			// We always load all namespaces and filter them on the frontend
diff --git a/src/store/modules/tasks.js b/src/store/modules/tasks.js
index 48be46bba..546e82b42 100644
--- a/src/store/modules/tasks.js
+++ b/src/store/modules/tasks.js
@@ -10,7 +10,7 @@ export default {
 	state: () => ({}),
 	actions: {
 		update(ctx, task) {
-			const cancel = setLoading(ctx)
+			const cancel = setLoading(ctx, 'tasks')
 
 			const taskService = new TaskService()
 			return taskService.update(task)
diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
index 8d45cb6de..da9921d8e 100644
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -1,4 +1,5 @@
 export const LOADING = 'loading'
+export const LOADING_MODULE = 'loadingModule'
 export const ERROR_MESSAGE = 'errorMessage'
 export const ONLINE = 'online'
 export const IS_FULLPAGE = 'isFullpage'
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index bbeec4342..9f60f3084 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -107,8 +107,8 @@
 						>
 							<div
 								:class="{
-							'is-loading': (taskService.loading || loading) && taskUpdating[task.id],
-							'draggable': !(taskService.loading || loading) || !taskUpdating[task.id],
+							'is-loading': (taskService.loading || taskLoading) && taskUpdating[task.id],
+							'draggable': !(taskService.loading || taskLoading) || !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}"
@@ -268,9 +268,9 @@ import Filters from '../../../components/list/partials/filters'
 import {filterObject} from '@/helpers/filterObject'
 import {applyDrag} from '@/helpers/applyDrag'
 import {mapState} from 'vuex'
-import {LOADING} from '@/store/mutation-types'
 import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/rights.json'
+import { LOADING, LOADING_MODULE } from '../../../store/mutation-types'
 
 export default {
 	name: 'Kanban',
@@ -333,7 +333,8 @@ export default {
 	computed: mapState({
 		buckets: state => state.kanban.buckets,
 		loadedListId: state => state.kanban.listId,
-		loading: LOADING,
+		loading: state => state[LOADING] && state[LOADING_MODULE] === 'kanban',
+		taskLoading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
 		canWrite: state => state.currentList.maxRight > Rights.READ,
 		list: state => state.currentList,
 	}),