Delay loading animation (#8)

src/components/Home.vue

@@ -57,14 +57,17 @@
                 auth.logout()
             },
 			loadPendingTasks() {
-				this.loading = true
+				const cancel = message.setLoading(this)
 				HTTP.get(`tasks`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
 					.then(response => {
 						this.tasks = response.data
 						this.tasks.sort(this.sortyByDeadline)
+						cancel()
 						this.loading = false
 					})
 					.catch(e => {
+						cancel()
+						this.loading = false
 						this.handleError(e)
 					})
             },
@@ -78,7 +81,6 @@
 				router.push({name: 'showList', params: {id: lid}})
 			},
 			handleError(e) {
-				this.loading = false
 				message.error(e, this)
 			}
         },

src/components/lists/EditList.vue

@@ -97,7 +97,7 @@
         },
         methods: {
             loadList() {
-                this.loading = true
+                const cancel = message.setLoading(this)
 
                 HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
@@ -105,14 +105,14 @@
 						if (response.data.owner.id === this.user.infos.id) {
 							this.userIsAdmin = true
 						}
-                        this.loading = false
+                        cancel()
                     })
                     .catch(e => {
                         this.handleError(e)
                     })
             },
             submit() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.post(`lists/` + this.$route.params.id, this.list, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
@@ -126,27 +126,30 @@
                             }
                         }
                         this.handleSuccess({message: 'The list was successfully updated.'})
+						cancel()
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
             },
             deleteList() {
+				const cancel = message.setLoading(this)
                 HTTP.delete(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(() => {
                         this.handleSuccess({message: 'The list was successfully deleted.'})
+						cancel()
                         router.push({name: 'home'})
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
             },
             handleError(e) {
-                this.loading = false
                 message.error(e, this)
             },
             handleSuccess(e) {
-                this.loading = false
                 message.success(e, this)
             }
         }

src/components/lists/NewList.vue

@@ -45,23 +45,23 @@
         },
         methods: {
             newList() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.put(`namespaces/` + this.$route.params.id + `/lists`, this.list, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(() => {
 						this.$parent.loadNamespaces()
 						this.handleSuccess({message: 'The list was successfully created.'})
+						cancel()
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
             },
             handleError(e) {
-                this.loading = false
                 message.error(e, this)
             },
             handleSuccess(e) {
-                this.loading = false
                 message.success(e, this)
             }
         }

src/components/lists/ShowList.vue

@@ -190,12 +190,10 @@
         methods: {
             loadList() {
                 this.isTaskEdit = false
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.get(`lists/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
-                        this.loading = false
-
 						// Make date objects from timestamps
                         for (const t in response.data.tasks) {
                             let dueDate = new Date(response.data.tasks[t].dueDate * 1000)
@@ -215,36 +213,41 @@
                         if (this.list.tasks === null) {
                             this.list.tasks = []
                         }
+						cancel() // cancel the timer
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
             },
             addTask() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.put(`lists/` + this.$route.params.id, {text: this.newTask}, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
                         this.list.tasks.push(response.data)
                         this.handleSuccess({message: 'The task was successfully created.'})
+						cancel() // cancel the timer
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
 
                 this.newTask = ''
             },
 			markAsDone(e) {
-
+				const cancel = message.setLoading(this)
-                this.loading = true
 
                 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 => {
                         this.handleError(e)
+						cancel
                     })
 			},
 			editTask(id) {
@@ -288,7 +291,7 @@
 				this.isTaskEdit = true
 			},
 			editTaskSubmit() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
 				// Convert the date in a unix timestamp
 				let duedate = (+ new Date(this.taskEditTask.dueDate)) / 1000
@@ -335,9 +338,11 @@
 						// Also update the current taskedit object so the ui changes
 						this.$set(this, 'taskEditTask', response.data)
                         this.handleSuccess({message: 'The task was successfully updated.'})
+						cancel() // cancel the timers
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
 			},
 			updateTaskByID(id, updatedTask) {
@@ -395,11 +400,9 @@
 				return dates
 			},
             handleError(e) {
-                this.loading = false
                 message.error(e, this)
             },
             handleSuccess(e) {
-                this.loading = false
                 message.success(e, this)
             }
         }

src/components/namespaces/EditNamespace.vue

@@ -97,7 +97,7 @@
         },
 		methods: {
             loadNamespace() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.get(`namespaces/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
@@ -105,14 +105,15 @@
 						if (response.data.owner.id === this.user.infos.id) {
 							this.userIsAdmin = true
 						}
-                        this.loading = false
+						cancel()
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
             },
             submit() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.post(`namespaces/` + this.$route.params.id, this.namespace, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
@@ -124,27 +125,30 @@
                             }
                         }
                         this.handleSuccess({message: 'The namespace was successfully updated.'})
+						cancel()
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
             },
             deleteNamespace() {
+				const cancel = message.setLoading(this)
                 HTTP.delete(`namespaces/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(() => {
                         this.handleSuccess({message: 'The namespace was successfully deleted.'})
+                        cancel()
 						router.push({name: 'home'})
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
 			},
             handleError(e) {
-                this.loading = false
                 message.error(e, this)
             },
             handleSuccess(e) {
-                this.loading = false
                 message.success(e, this)
             }
 		}

src/components/namespaces/NewNamespace.vue

@@ -45,23 +45,23 @@
         },
         methods: {
             newNamespace() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.put(`namespaces`, this.namespace, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(() => {
                         this.$parent.loadNamespaces()
                         this.handleSuccess({message: 'The namespace was successfully created.'})
+						cancel()
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
             },
             handleError(e) {
-                this.loading = false
                 message.error(e, this)
             },
             handleSuccess(e) {
-                this.loading = false
                 message.success(e, this)
             }
         }

src/components/sharing/team.vue

@@ -121,27 +121,33 @@
 		},
 		methods: {
 			loadTeams() {
+				const cancel = message.setLoading(this)
 				HTTP.get(this.typeString + `s/` + this.id + `/teams`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
 					.then(response => {
 						this.$set(this, 'listTeams', response.data)
-						this.loading = false
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			deleteTeam() {
+				const cancel = message.setLoading(this)
 				HTTP.delete(this.typeString + `s/` + this.id + `/teams/` + this.teamToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
 					.then(() => {
 						this.showTeamDeleteModal = false;
 						this.handleSuccess({message: 'The team was successfully deleted from the ' + this.typeString + '.'})
 						this.loadTeams()
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			addTeam(admin) {
+				const cancel = message.setLoading(this)
 				if(admin === null) {
 					admin = false
 				}
@@ -154,12 +160,15 @@
 					.then(() => {
 						this.loadTeams()
 						this.handleSuccess({message: 'The team was successfully added.'})
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			toggleTeamType(teamid, current) {
+				const cancel = message.setLoading(this)
 				let right = 0
 				if (!current) {
 					right = 2
@@ -169,17 +178,17 @@
 					.then(() => {
 						this.loadTeams()
 						this.handleSuccess({message: 'The team right was successfully updated.'})
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			handleError(e) {
-				this.loading = false
 				message.error(e, this)
 			},
 			handleSuccess(e) {
-				this.loading = false
 				message.success(e, this)
 			}
 		},

src/components/sharing/user.vue

@@ -142,28 +142,34 @@
 		},
 		methods: {
 			loadUsers() {
+				const cancel = message.setLoading(this)
 				HTTP.get(this.typeString + `s/` + this.id + `/users`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
 					.then(response => {
 						//response.data.push(this.list.owner)
 						this.$set(this, 'users', response.data)
-						this.loading = false
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			deleteUser() {
+				const cancel = message.setLoading(this)
 				HTTP.delete(this.typeString + `s/` + this.id + `/users/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
 					.then(() => {
 						this.showUserDeleteModal = false;
 						this.handleSuccess({message: 'The user was successfully deleted from the ' + this.typeString + '.'})
 						this.loadUsers()
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			addUser(admin) {
+				const cancel = message.setLoading(this)
 				if(admin === null) {
 					admin = false
 				}
@@ -179,12 +185,15 @@
 						this.loadUsers()
 						this.newUser = {}
 						this.handleSuccess({message: 'The user was successfully added.'})
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			toggleUserType(userid, current) {
+				const cancel = message.setLoading(this)
 				let right = 0
 				if (!current) {
 					right = 2
@@ -194,16 +203,18 @@
 					.then(() => {
 						this.loadUsers()
 						this.handleSuccess({message: 'The user right was successfully updated.'})
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			findUsers(query) {
-				this.loading = true;
+				const cancel = message.setLoading(this)
 				if(query === '') {
 					this.$set(this, 'foundUsers', [])
-					this.loading = false
+					cancel()
 					return
 				}
 
@@ -220,10 +231,11 @@
 							})
 						}
 
-						this.loading = false
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			clearAll () {
@@ -233,11 +245,9 @@
 				return `and ${count} others`
 			},
 			handleError(e) {
-				this.loading = false
 				message.error(e, this)
 			},
 			handleSuccess(e) {
-				this.loading = false
 				message.success(e, this)
 			}
 		},

src/components/teams/EditTeam.vue

@@ -170,7 +170,7 @@
         },
 		methods: {
             loadTeam() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.get(`teams/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
@@ -181,14 +181,14 @@
 								this.userIsAdmin = true
 							}
 						}
-                        this.loading = false
+                        cancel()
                     })
                     .catch(e => {
                         this.handleError(e)
                     })
             },
             submit() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.post(`teams/` + this.$route.params.id, this.team, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
@@ -200,33 +200,42 @@
                             }
                         }
                         this.handleSuccess({message: 'The team was successfully updated.'})
+						cancel()
                     })
                     .catch(e => {
                         this.handleError(e)
+						cancel()
                     })
             },
             deleteTeam() {
+				const cancel = message.setLoading(this)
                 HTTP.delete(`teams/` + this.$route.params.id, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(() => {
                         this.handleSuccess({message: 'The team was successfully deleted.'})
+						cancel()
                         router.push({name: 'home'})
                     })
                     .catch(e => {
+						cancel()
                         this.handleError(e)
                     })
 			},
 			deleteUser() {
+				const cancel = message.setLoading(this)
 				HTTP.delete(`teams/` + this.$route.params.id + `/members/` + this.userToDelete, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
 					.then(() => {
 						this.showUserDeleteModal = false;
 						this.handleSuccess({message: 'The user was successfully deleted from the team.'})
 						this.loadTeam()
+						cancel()
 					})
 					.catch(e => {
+						cancel()
 						this.handleError(e)
 					})
 			},
 			addUser(admin) {
+				const cancel = message.setLoading(this)
 				if(admin === null) {
 					admin = false
 				}
@@ -234,9 +243,11 @@
 					.then(() => {
 						this.loadTeam()
 						this.handleSuccess({message: 'The team member was successfully added.'})
+						cancel()
 					})
 					.catch(e => {
 						this.handleError(e)
+						cancel()
 					})
 			},
 			toggleUserType(userid, current) {
@@ -246,11 +257,9 @@
 				this.addUser(!current)
 			},
             handleError(e) {
-                this.loading = false
                 message.error(e, this)
             },
             handleSuccess(e) {
-                this.loading = false
                 message.success(e, this)
             }
 		}

src/components/teams/ListTeams.vue

@@ -40,19 +40,18 @@
         },
 		methods: {
 			loadTeams() {
-                this.loading = true
+				const cancel = message.setLoading(this)
 
                 HTTP.get(`teams`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
                     .then(response => {
                         this.$set(this, 'teams', response.data)
-                        this.loading = false
+                        cancel()
                     })
                     .catch(e => {
                         this.handleError(e)
                     })
 			},
             handleError(e) {
-                this.loading = false
                 message.error(e, this)
             },
 		}

src/components/teams/NewTeam.vue

@@ -45,23 +45,23 @@
 		},
 		methods: {
 			newTeam() {
-				this.loading = true
+				const cancel = message.setLoading(this)
 
 				HTTP.put(`teams`, this.team, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
 					.then(response => {
 						router.push({name:'editTeam', params:{id: response.data.id}})
 						this.handleSuccess({message: 'The team was successfully created.'})
+						cancel()
 					})
 					.catch(e => {
+						cancel()
 						this.handleError(e)
 					})
 			},
 			handleError(e) {
-				this.loading = false
 				message.error(e, this)
 			},
 			handleSuccess(e) {
-				this.loading = false
 				message.success(e, this)
 			}
 		}

src/components/user/Login.vue

@@ -36,6 +36,7 @@
     import auth from '../../auth'
     import router from '../../router'
     import {HTTP} from '../../http-common'
+	import message from '../../message'
 
     export default {
         data() {
@@ -53,15 +54,15 @@
             // Try to verify the email
 			let emailVerifyToken = localStorage.getItem('emailConfirmToken')
 			if (emailVerifyToken) {
-				this.loading = true
+				const cancel = message.setLoading(this)
 				HTTP.post(`user/confirm`, {token: emailVerifyToken})
 					.then(() => {
                         localStorage.removeItem('emailConfirmToken')
-                        this.loading = false
                         this.confirmedEmailSuccess = true
+						cancel()
                     })
                     .catch(e => {
-                        this.loading = false
+                        cancel()
                         this.error = e.response.data.message
                     })
 			}

src/components/user/PasswordReset.vue

@@ -38,6 +38,7 @@
 
 <script>
     import {HTTP} from '../../http-common'
+	import message from '../../message'
 
     export default {
         data() {
@@ -53,11 +54,11 @@
         },
         methods: {
             submit() {
-                this.loading = true
+				const cancel = message.setLoading(this)
                 this.error = ''
 
                 if (this.credentials.password2 !== this.credentials.password) {
-                    this.loading = false
+                    cancel()
                     this.error = 'Passwords don\'t match'
                     return
                 }
@@ -71,17 +72,17 @@
                     .then(response => {
 						this.handleSuccess(response)
                         localStorage.removeItem('passwordResetToken')
+						cancel()
                     })
                     .catch(e => {
                         this.error = e.response.data.message
+						cancel()
                     })
             },
             handleError(e) {
-                this.loading = false
                 this.error = e.response.data.message
             },
             handleSuccess(e) {
-                this.loading = false
                 this.successMessage = e.data.message
             }
         }

src/components/user/RequestPasswordReset.vue

@@ -31,6 +31,7 @@
 
 <script>
     import {HTTP} from '../../http-common'
+	import message from '../../message'
 
     export default {
         data() {
@@ -43,7 +44,7 @@
         },
         methods: {
             submit() {
-                this.loading = true
+				const cancel = message.setLoading(this)
                 this.error = ''
                 let credentials = {
                     user_name: this.username,
@@ -51,15 +52,15 @@
 
                 HTTP.post(`user/password/token`, credentials)
                     .then(() => {
-                        this.loading = false
+						cancel()
 						this.isSuccess = true
                     })
                     .catch(e => {
+						cancel()
                         this.handleError(e)
                     })
             },
             handleError(e) {
-                this.loading = false
                 this.error = e.response.data.message
             },
         }

src/message/index.js

@@ -1,4 +1,12 @@
 export default {
+	setLoading(context) {
+		const timeout = setTimeout(function () {
+			context.loading = true
+		}, 100);
+		return () => {
+			clearTimeout(timeout);
+		};
+	},
     error(e, context) {
         // Build the notification text from error response
         let err = e.message
@@ -12,6 +20,8 @@ export default {
             title: 'Error',
             text: err
         })
+
+		context.loading = false
     },
     success(e, context) {
         // Build the notification text from error response
@@ -26,6 +36,8 @@ export default {
             title: 'Success',
             text: err
         })
+
+		context.loading = false
     },
 
 }