src/components/lists/ShowList.vue

@@ -307,18 +307,27 @@
 				this.list.tasks = this.sortTasks(this.list.tasks)
 			},
 			markAsDone(e) {
-				const cancel = message.setLoading(this)
+				let context = this
+				if (e.target.checked) {
+					setTimeout(doTheDone, 300); // Delay it to show the animation when marking a task as done
+				} else {
+					doTheDone() // Don't delay it when un-marking it as it doesn't have an animation the other way around
+				}
 
-                HTTP.post(`tasks/` + e.target.id, {done: e.target.checked}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
-                    .then(response => {
-                        this.updateTaskByID(parseInt(e.target.id), response.data)
-                        this.handleSuccess({message: 'The task was successfully ' + (e.target.checked ? '' : 'un-') + 'marked as done.'})
-						cancel() // To not set the spinner to loading when the request is made in less than 100ms, would lead to loading infinitly.
-                    })
-                    .catch(e => {
-                        cancel()
-						this.handleError(e)
-                    })
+				function doTheDone() {
+					const cancel = message.setLoading(context)
+
+					HTTP.post(`tasks/` + e.target.id, {done: e.target.checked}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+						.then(response => {
+							context.updateTaskByID(parseInt(e.target.id), response.data)
+							context.handleSuccess({message: 'The task was successfully ' + (e.target.checked ? '' : 'un-') + 'marked as done.'})
+							cancel() // To not set the spinner to loading when the request is made in less than 100ms, would lead to loading infinitly.
+						})
+						.catch(e => {
+							cancel()
+							context.handleError(e)
+						})
+				}
 			},
 			editTask(id) {
                 // Find the selected task and set it to the current object