implement spinner to show loading status

static/balance.js

@@ -90,6 +90,8 @@ function fastPosChanged() {
 
 function balance(){
 	
+	cont = document.getElementById("response-container")
+	cont.innerHTML = ""
 	sides  = ["left", "right"]
 
 	blue = [ "", "", "", "", ""]
@@ -129,6 +131,8 @@ function balance(){
 	jsonData = JSON.stringify(dictAll, null, 4);
 
 	/* transmitt */
+	spinner = document.getElementById("loading")
+	spinner.style.display = "block";
 	fetch(window.location.href, {
   		method: 'post',
   		headers: {
@@ -136,7 +140,7 @@ function balance(){
     			'Content-Type': 'application/json' },
   		body: jsonData
 	}).then(r => r.json()).then(j => {
-		cont = document.getElementById("response-container")
+		spinner.style.display = "none";
 		cont.innerHTML = j["content"]
 	})
 

templates/json_builder.html

@@ -18,6 +18,9 @@
 
 	    <button type="button" class="mb-3 btn btn-secondary" onclick="balance()">Go</button>
 
+		<div class="spinner-border" id="loading" style="display: none;" role="status">
+		  <span class="sr-only">Loading...</span>
+		</div>
             <div id="response-container" class="mt-3 mb-3">
             </div>