[TASK] #3 Change overflowing spinner - [FIX] Reload - set active bug

package-lock.json

@@ -7491,10 +7491,10 @@
         "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-spinners-css": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/vue-spinners-css/-/vue-spinners-css-1.1.3.tgz",
+      "integrity": "sha512-EbWBH2tPj+YjJOYcZ8gyFCYFK0QCxECCH5xFUeOXKxvN4tVgP6Axk5A60ld+GUBcg+YuBn/EYSG/jifEWpzi9Q=="
     },
     "vue-style-loader": {
       "version": "4.1.2",

package.json

@@ -22,9 +22,9 @@
     "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"
+    "webpack-dev-server": "^3.9.0",
+    "vue-spinners-css": "^1.1.3"
   }
 }

src/StatusBox.vue

@@ -11,14 +11,11 @@
 			</select>
 			
 			<input v-model="target" placeholder="Enter Ip or Domain">
-			<VueLoadingButton 
-			:id="'vueOwnButtonStyle'"
-			aria-label="Post message"
-			class="button"
-			@click.native="handleClick"
-			:loading="isLoading"
-			:styled="false"
-			>⛟</VueLoadingButton> <br>
+			<button v-on:click="handleClick()">
+				⛟
+			</button>
+<RingLoader :size="10" :loading="isLoading" color="black"></RingLoader>
+			<br>
 			
 			<span class="small">{{infoString}}</span>
 			<div>
@@ -55,11 +52,11 @@
 import axios from 'axios';
 import XtrServer from './ModelObjects/XtrServer.js';
 import XtrData from './ModelObjects/XtrData.js';
-import VueLoadingButton from 'vue-loading-button';
+import { RingLoader } from 'vue-spinners-css';
 
 export default {
 	components: {
-		VueLoadingButton
+		RingLoader
 	},
 	props: {
 		serverlist: Array,
@@ -350,16 +347,5 @@ export default {
 		50% { transform: rotate(30deg); } 
 		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;
-	}
-	
+	}	
 </style>

src/StatusBoxContainer.vue

@@ -148,12 +148,15 @@ export default {
 			});
 		},
 		setActive: function setActive(tableId) {
-			var settedClasses = document.getElementById("tableId_"+tableId).className;
-			if (settedClasses == 'table table-striped') {
-				document.getElementById("tableId_"+tableId).className = 'table table-striped active';
-			} else {
-				document.getElementById("tableId_"+tableId).className = 'table table-striped';
-			}
+			this.$nextTick(() => {
+				var settedClasses = document.getElementById("tableId_"+tableId).className;
+				if (settedClasses == 'table table-striped') {
+					document.getElementById("tableId_"+tableId).className = 'table table-striped active';
+				} else {
+					document.getElementById("tableId_"+tableId).className = 'table table-striped';
+				}
+			});
+			
 		},
 		setActiveFromSession: function setActiveFromSession(tableIds) {
 			tableIds.forEach(tableId => {
@@ -220,19 +223,16 @@ export default {
 		padding: 5px;
 	}
 
-	.info
-	{
+	.info {
 		display: block; position: absolute; right: 10px; top: 10px;
 	}
 
-	.info:hover .info_box
-	{
+	.info:hover .info_box {
 		visibility: visible;
 		z-index: 4;
 	}
 	
-	.info .info_box
-	{
+	.info .info_box {
 		display: block;
 		position: absolute;
 		right: 0px;