Add button loading spinner

package-lock.json

@@ -7491,6 +7491,11 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-loading-button": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/vue-loading-button/-/vue-loading-button-0.2.0.tgz",
+      "integrity": "sha512-HjlNzS2deIaXGr7cZU/J/SiaZfA6OvJC+vzujTohUCs0cF+6G9p4SfTquT4watDFl5m3yO4OBEaxhE99JQLBNA=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -22,6 +22,7 @@
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.5.17",
     "axios": "^0.19.0",
+    "vue-loading-button": "^0.2.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0"

src/StatusBox.vue

@@ -11,7 +11,16 @@
 			</select>
 			
 			<input v-model="target" placeholder="Enter Ip or Domain">
-			<button v-on:click="traceRoute()">⛟</button> <br>
+			<!-- <button v-on:click="traceRoute()">⛟</button> -->
+			<VueLoadingButton 
+			:id="'vueOwnButtonStyle'"
+			aria-label="Post message"
+			class="button"
+			@click.native="handleClick"
+			:loading="isLoading"
+			:styled="false"
+			>⛟</VueLoadingButton> <br>
+			
 			<!-- <span class="small">{{executionTime}}</span> -->
 			<span class="small">{{infoString}}</span>
 			<div>
@@ -48,8 +57,12 @@
 import axios from 'axios';
 import XtrServer from './ModelObjects/XtrServer.js';
 import XtrData from './ModelObjects/XtrData.js';
+import VueLoadingButton from 'vue-loading-button';
 
 export default {
+	components: {
+		VueLoadingButton
+	},
 	props: {
 		serverlist: Array,
 		pending: Boolean,
@@ -58,13 +71,16 @@ export default {
 	},
 	data : function () {
 		return {
+			isLoading: false,
 			executionTime: 'Not execute yet',
 			selectedServerData: this.initData,
 			tick: '',
 			target: 'luan.xicon.eu',
 			tableData : [ ],
 			tableDataHistory: [],
-			tableDataHistoryObject: []
+			tableDataHistoryObject: [],
+			jobCount: 0,
+			jobList: []
 		}
 	},
 	watch: {
@@ -173,6 +189,10 @@ export default {
 			}
 		},
 
+		handleClick: function handleClick() {
+			this.traceRoute();			
+		},
+
 		setLastExecutionTime : function setLastExecutionTime() {
 			var day = new Date();
 			this.executionTime = day.toISOString()
@@ -180,6 +200,9 @@ export default {
 		},
 		
 		traceRoute : function traceRoute() {
+			this.isLoading = true;
+			let jobId = this.getJobCount;
+			this.jobList.push(jobId);
 			// e.g. http://199.247.22.146:12111/v3/client/request/8.8.8.8
 			axios.get("http://" + this.selectedServerData.getIpPortAsString() + "/v3/client/request/" + this.target)
 				.then(response => {
@@ -194,10 +217,25 @@ export default {
 				})
 				.catch(e => {
 					this.executionTime = 'Check request'
-				})
+				}).finally(ee => { 
+					var position = this.jobList.indexOf(jobId);
+
+					if(~position) {
+						this.jobList.splice(position, 1);
+					} 
+					if(this.jobList.length < 1) {
+						this.jobCount = 0;
+						this.isLoading = false;
+					}
+				});
 				
 		},
 
+		getJobCount : function getJobCount() {
+			this.jobCount += 1;
+			return this.jobCount;
+		},
+
 		resetData : function resetData() {
 			this.executionTime =  'Not execute yet';
 			this.target =  'luan.xicon.eu';
@@ -300,4 +338,20 @@ export default {
 		75% { transform: rotate(0deg); }
 		100% { transform: rotate(-30deg); }
 	}
+
+	button#vueOwnButtonStyle {
+		font-family: inherit;
+		font-size: 0.9rem;
+		line-height: 1.15;
+		margin: 0;
+		overflow: visible;
+		text-transform: none;
+		-webkit-appearance: button;
+	}
+
+	.spinner > span {
+		width: 0.7rem !important;
+		height: 0.7rem !important;
+	}
+	
 </style>