Fix showing import tasks cta when tasks are loading

src/store/modules/tasks.js

@@ -3,12 +3,30 @@ import TaskAssigneeService from '../../services/taskAssignee'
 import TaskAssigneeModel from '../../models/taskAssignee'
 import LabelTaskModel from '../../models/labelTask'
 import LabelTaskService from '../../services/labelTask'
-import {setLoading} from '@/store/helper'
+import {HAS_TASKS} from '../mutation-types'
+import {setLoading} from '../helper'
 
 export default {
 	namespaced: true,
 	state: () => ({}),
 	actions: {
+		loadTasks(ctx, params) {
+			const cancel = setLoading(ctx, 'tasks')
+			const taskService = new TaskService()
+			
+			return taskService.getAll({}, params)
+				.then(r => {
+					ctx.commit(HAS_TASKS, r.length > 0)
+					return r
+				})
+				.catch(e => {
+					return Promise.reject(e)
+				})
+				.finally(() => {
+					cancel()
+				})
+			
+		},
 		update(ctx, task) {
 			const cancel = setLoading(ctx, 'tasks')
 

src/styles/components/tasks.scss

@@ -287,10 +287,6 @@
 	.user img {
 		margin: 0;
 	}
-
-	.spinner.is-loading:after {
-		margin-left: calc(40% - 1rem);
-	}
 }
 
 .defer-task {

src/styles/theme/loading.scss

@@ -25,9 +25,7 @@
       width: 2rem;
       height: 2rem;
       margin-left: calc(50% - 1rem);
-      position: absolute;
       margin-top: 1rem;
-      z-index: 999;
       border-width: 0.25rem;
     }
   }

src/views/Home.vue

@@ -8,16 +8,17 @@
 			@taskAdded="updateTaskList"
 			class="is-max-width-desktop"
 		/>
-		<template v-if="!hasTasks">
+		<template v-if="!hasTasks && !loading">
-			<p class="mt-4">{{ $t('home.list.newText') }}</p>
+			<template v-if="defaultNamespaceId > 0">
-			<x-button
+				<p class="mt-4">{{ $t('home.list.newText') }}</p>
-				:to="{ name: 'list.create', params: { id: defaultNamespaceId } }"
+				<x-button
-				:shadow="false"
+					:to="{ name: 'list.create', params: { id: defaultNamespaceId } }"
-				class="ml-2"
+					:shadow="false"
-				v-if="defaultNamespaceId > 0"
+					class="ml-2"
-			>
+				>
-				{{ $t('home.list.new') }}
+					{{ $t('home.list.new') }}
-			</x-button>
+				</x-button>
+			</template>
 			<p class="mt-4" v-if="migratorsEnabled">
 				{{ $t('home.list.importText') }}
 			</p>
@@ -49,6 +50,7 @@ import ShowTasks from './tasks/ShowTasks.vue'
 import {getHistory} from '../modules/listHistory'
 import ListCard from '@/components/list/partials/list-card.vue'
 import AddTask from '../components/tasks/add-task.vue'
+import {LOADING, LOADING_MODULE} from '../store/mutation-types'
 
 export default {
 	name: 'Home',
@@ -59,7 +61,6 @@ export default {
 	},
 	data() {
 		return {
-			loading: false,
 			currentDate: new Date(),
 			tasks: [],
 			showTasksKey: 0,
@@ -115,6 +116,7 @@ export default {
 
 				return state.namespaces.namespaces[0].lists.length > 0
 			},
+			loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
 		}),
 	},
 	methods: {

src/views/tasks/ShowTasks.vue

@@ -14,18 +14,18 @@
 		<h3 v-else-if="!showAll" class="mb-2">
 			{{ $t('task.show.from') }}
 			<flat-pickr
-				:class="{ 'disabled': taskService.loading}"
+				:class="{ 'disabled': loading}"
 				:config="flatPickerConfig"
-				:disabled="taskService.loading"
+				:disabled="loading"
 				@on-close="setDate"
 				class="input"
 				v-model="cStartDate"
 			/>
 			{{ $t('task.show.until') }}
 			<flat-pickr
-				:class="{ 'disabled': taskService.loading}"
+				:class="{ 'disabled': loading}"
 				:config="flatPickerConfig"
-				:disabled="taskService.loading"
+				:disabled="loading"
 				@on-close="setDate"
 				class="input"
 				v-model="cEndDate"
@@ -36,11 +36,11 @@
 			<x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">{{ $t('task.show.nextWeek') }}</x-button>
 			<x-button type="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</x-button>
 		</div>
-		<template v-if="!taskService.loading && (!tasks || tasks.length === 0) && showNothingToDo">
+		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
 			<h3 class="nothing">{{ $t('task.show.noTasks') }}</h3>
 			<img alt="" src="/images/cool.svg"/>
 		</template>
-		<div :class="{ 'is-loading': taskService.loading}" class="spinner"></div>
+		<div :class="{ 'is-loading': loading}" class="spinner"></div>
 
 		<card :padding="false" class="has-overflow" :has-content="false" v-if="tasks && tasks.length > 0">
 			<div class="tasks">
@@ -56,14 +56,13 @@
 	</div>
 </template>
 <script>
-import TaskService from '../../services/task'
 import SingleTaskInList from '../../components/tasks/partials/singleTaskInList'
-import {HAS_TASKS} from '@/store/mutation-types'
 import {mapState} from 'vuex'
 
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import Fancycheckbox from '../../components/input/fancycheckbox'
+import {LOADING, LOADING_MODULE} from '../../store/mutation-types'
 
 export default {
 	name: 'ShowTasks',
@@ -75,7 +74,6 @@ export default {
 	data() {
 		return {
 			tasks: [],
-			taskService: TaskService,
 			showNulls: true,
 			showOverdue: false,
 
@@ -91,7 +89,6 @@ export default {
 		showAll: Boolean,
 	},
 	created() {
-		this.taskService = new TaskService()
 		this.cStartDate = this.startDate
 		this.cEndDate = this.endDate
 		this.loadPendingTasks()
@@ -123,6 +120,7 @@ export default {
 		},
 		...mapState({
 			userAuthenticated: state => state.auth.authenticated,
+			loading: state => state[LOADING] && state[LOADING_MODULE] === 'tasks',
 		}),
 	},
 	methods: {
@@ -193,7 +191,7 @@ export default {
 				}
 			}
 
-			this.taskService.getAll({}, params)
+			this.$store.dispatch('tasks/loadTasks', params)
 				.then(r => {
 
 					// Sort all tasks to put those with a due date before the ones without a due date, the
@@ -206,7 +204,6 @@ export default {
 					const tasks = r.filter(t => t.dueDate !== null).concat(r.filter(t => t.dueDate === null))
 
 					this.$set(this, 'tasks', tasks)
-					this.$store.commit(HAS_TASKS, r.length > 0)
 				})
 				.catch(e => {
 					this.error(e)