add spinners

client/js/masterFilter.js

@@ -31,10 +31,19 @@ let createMasterFilterFrame=()=>{
 		
 		<h2 id='tbSelectedTime'></h2>
 		
-		<div id='spinner' style='z-index:100; position:absolute;display:none'>
-  			<h1 style='color:red'>*</h1>
+		<div id='spinner-optionChain' class='spinner'>
+  			<h1>*</h1>
 		</div>
-    `;
+		<div id='spinner-symbol' class='spinner'>
+  			<h1>*</h1>
+		</div>
+		<div id='spinner-time' class='spinner'>
+  			<h1>*</h1>
+		</div>
+		<div id='spinner-date' class='spinner'>
+  			<h1>*</h1>
+		</div>
+	`;
 
 	let _filterContext={}; // TODO: This is bad, grown design - should be replaced with a proper object oriented structure and observer pattern.
 	Object.defineProperty(me,"selectedDate",{
@@ -64,6 +73,7 @@ let createMasterFilterFrame=()=>{
 	}
 	
 	me.fetchSymbols=()=>{
+		$("#spinner-symbol").show();
 		$.get({
 			url:"/getSymbols"
 		}).done(response=>{
@@ -75,6 +85,7 @@ let createMasterFilterFrame=()=>{
 			}	
 			aAllSymbols=aAllSymbols.sort();
 			me.refreshSymbolList(aAllSymbols);
+			$("#spinner-symbol").hide();
 		});
 	}
 	
@@ -125,19 +136,20 @@ let createMasterFilterFrame=()=>{
 	}
 	
 	me.requestOptionChain=()=>{
-		$("#spinner").show();
+		$("#spinner-optionChain").show();
 		$.ajax({
 			url:"/getOptionChain?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol + "&Time="+ _filterContext.selectedTime
 		}).done(response=>{
 			dta=JSON.parse(response[0].Data);
 			//console.log("received",dta);
-			$("#spinner").hide();
 			displayOptionChain();
 			$("#tbUnderlyingPrice").text(dta.underlyingPrice.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2}));
+			$("#spinner-optionChain").hide();
 		});
 	}
 	
 	me.showTimesForDay=()=>{
+		$("#spinner-time").show();
 		return $.ajax({
 			url:"/getTimes?Date=" + _filterContext.theDate + "&Symbol=" + _filterContext.theSymbol
 		}).done(response=>{
@@ -163,17 +175,20 @@ let createMasterFilterFrame=()=>{
 	
 			}
 			$("#lbTime").change();
+			$("#spinner-time").hide();
 		});
 		
 	}
 	
 	me.getAvailDatesForSymbol=(theSymbol)=>{
+		$("#spinner-date").show();
 		return $.ajax({
 			url:"/getDates?Symbol=" + theSymbol
 		}).done(response=>{
 			let availableDates=response;
 			//console.log(availableDates);
 			_filterContext.availableDates=availableDates;
+			$("#spinner-date").hide();
 		});
 	}