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

@@ -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')

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 => {
+			const cancel = setLoading(ctx, 'namespaces')
-				ctx.commit('loading', status, {root: true})
-			})
 
 			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'

src/views/list/views/Kanban.vue

@@ -107,8 +107,8 @@
 						>
 							<div
 								:class="{
-							'is-loading': (taskService.loading || loading) && taskUpdating[task.id],
+							'is-loading': (taskService.loading || taskLoading) && taskUpdating[task.id],
-							'draggable': !(taskService.loading || loading) || !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,
 	}),