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

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;