Add loading spinners.

frontend/src/app/bisq/bisq-market/bisq-market.component.html

@@ -40,7 +40,15 @@
         </div>
       </form>
 
-      <app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>      
+      <div class="clearfix"></div>
+
+      <div id="graphHolder">
+        <div class="text-center loadingChart" [hidden]="!isLoadingGraph">
+          <div class="spinner-border text-light"></div>
+        </div>
+        <app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>      
+      </div>
+
       <br>
 
       <ng-container *ngIf="offers$ | async as offers; else loadingSpinner">

frontend/src/app/bisq/bisq-market/bisq-market.component.scss

@@ -1,3 +1,14 @@
 .priceheader {
     font-size: 24px;
 }
+
+.loadingChart {
+    z-index: 100;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+}
+
+#graphHolder {
+    height: 550px;
+}

frontend/src/app/bisq/bisq-market/bisq-market.component.ts

@@ -21,6 +21,8 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
   radioGroupForm: FormGroup;
   defaultInterval = 'day';
 
+  isLoadingGraph = false;
+
   constructor(
     private websocketService: WebsocketService,
     private route: ActivatedRoute,
@@ -68,10 +70,13 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
     ])
     .pipe(
       switchMap(([routeParams, interval]) => {
+        this.isLoadingGraph = true;
         const pair = routeParams.get('pair');
         return this.bisqApiService.getMarketsHloc$(pair, interval);
       }),
       map((hlocData) => {
+        this.isLoadingGraph = false;
+
         hlocData = hlocData.map((h) => {
           h.time = h.period_start;
           return h;