Adding loader

package-lock.json

@@ -10,6 +10,7 @@
         "moment": "^2.29.1",
         "vue": "^2.6.14",
         "vue-apexcharts": "^1.6.2",
+        "vue-loading-overlay": "^3.4.2",
         "vue-router": "^3.5.3",
         "vuex": "^3.6.2"
       },
@@ -9043,6 +9044,18 @@
         }
       }
     },
+    "node_modules/vue-loading-overlay": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-3.4.2.tgz",
+      "integrity": "sha512-xcB+NPjl76eA0uggm707x3ZFgrNosZXpynHipyS3K+rrK1NztOV49R1LY+/4ij5W1KYANp7eRI2EIHrxCpmWAw==",
+      "engines": {
+        "node": ">=6.9.0",
+        "npm": ">=3.10.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@@ -16436,6 +16449,12 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-loading-overlay": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-3.4.2.tgz",
+      "integrity": "sha512-xcB+NPjl76eA0uggm707x3ZFgrNosZXpynHipyS3K+rrK1NztOV49R1LY+/4ij5W1KYANp7eRI2EIHrxCpmWAw==",
+      "requires": {}
+    },
     "vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",

package.json

@@ -13,6 +13,7 @@
     "moment": "^2.29.1",
     "vue": "^2.6.14",
     "vue-apexcharts": "^1.6.2",
+    "vue-loading-overlay": "^3.4.2",
     "vue-router": "^3.5.3",
     "vuex": "^3.6.2"
   }

resources/js/app.js

@@ -18,6 +18,20 @@ import VueApexCharts from 'vue-apexcharts'
 Vue.use(VueApexCharts)
 Vue.component('apexchart', VueApexCharts)
 
+import VueLoading from 'vue-loading-overlay';
+import 'vue-loading-overlay/dist/vue-loading.css';
+Vue.use(VueLoading, {
+    // Optional parameters
+    //container: this.fullPage ? null : this.$refs.formContainer,
+    canCancel: true,
+    backgroundColor: '#000',
+    color: '#0a9f9a',
+    width: 128,
+    height: 128,
+    opacity: 0.9,
+    loader: 'dots'
+})
+
 import Home from '../views/app.vue'
 import TaskDetails from '../views/taskdetails.vue'
 const router = new VueRouter({

resources/views/app.vue

@@ -11,16 +11,18 @@
 
     import TaskList from './components/tasklist.vue'
     import QuickView from './components/quickview.vue'
-
     export default{
         components: {
             QuickView,
-            TaskList
+            TaskList,
         },
         data: function() {
             return {
                 refreshed_time: null,
-                refresh: null
+                refresh: null,
+                loading: true,
+                color: '#FF0000',
+                size: '10rem',
             }
         },
         computed: {
@@ -34,6 +36,7 @@
                 .then(response => this.$store.commit('setTasks', response.data))
                 .then(() => {
                     this.refreshed_time = this.moment();
+                    this.loading.hide()
                 })
                 .catch(error => window.alert('Cannot get tasks'))
                 this.refreshed_time = this.moment();
@@ -44,6 +47,7 @@
             next();
         },
         mounted: function() {
+            this.loading = this.$loading.show()
             this.getTasks()
             this.refresh = window.setInterval(() => {
                 this.getTasks();

resources/views/components/tasklist.vue

@@ -99,10 +99,14 @@ export default {
 			}
 		},
 		disableTask: function(task_id, current_status) {
+			//this.loading = this.$loading.show()
 			this.$http.patch('/api/toggleTaskStatus/'+task_id, {
 				active: + !current_status
 			})
-			.then(response => this.$store.commit('updateTask', response.data))
+			.then(response => {
+				this.$store.commit('updateTask', response.data)
+				//this.loading = this.$loading.hide()
+			})
 		}
 	}
 }

resources/views/taskdetails.vue

@@ -29,7 +29,7 @@
 			<!-- History backlog -->
 			<div class="round">
 				<h3>Last {{ chart.days }} days history log</h3>
-				<div class="block-content" v-if="history.length > 0">
+				<div class="block-content" v-if="history">
 					<p><i>Showing only records where status has changed</i></p>
 					<table id="tasks_tbl">
 						<thead>
@@ -68,7 +68,7 @@
 			<!-- Notifications block -->
 			<div class="round">
 				<h3>Last {{ chart.days }} days notifications log</h3>
-				<div class="block-content" v-if="notifications.length > 0">
+				<div class="block-content" v-if="notifications">
 					<table id="tasks_tbl">
 						<thead>
 							<tr>
@@ -112,6 +112,7 @@
 				history: null,
 				notifications: null,
 				refresh: null,
+				loader: null,
 
 				chart: {
 					render: false,
@@ -157,7 +158,7 @@
 						return 'unknown';
 				}
 			},
-			refreshTask: function() {
+			refreshTask: function(callback) {
 				this.$http.post('/api/getTask/'+this.task.id, {
 					days: this.chart.days
 				})
@@ -166,13 +167,18 @@
 					this.history 		= response.data.history
 					this.notifications	= response.data.notifications
 					this.refreshGraph(response.data.stats)
+					this.loader.hide()
+				})
+				.then(() => {
+					if (this.refresh == null) {
+						this.refresh = window.setInterval(() => {
+							this.refreshTask()
+						}, 10000)
+					}
+				})
+				.then(() => {
+					this.loader.hide()
 				})
-
-				if (this.refresh == null) {
-					this.refresh = window.setInterval(() => {
-						this.refreshTask()
-					}, 10000)
-				}
 			},
 			refreshGraph: function(stats) {
 				let xaxis = [];
@@ -221,6 +227,7 @@
 			},
 		},
 		mounted: function() {
+			this.loader = this.$loading.show()
 			this.task.id = this.$route.params.id ?? null
 
 			if (this.task.id != null) {