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/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)
 		}

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
 		},

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)

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

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)

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'