Add loading spinners.

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

@@ -3,7 +3,12 @@
   <h1>Trading volume</h1>
 
   <div id="volumeHolder">
-    <ng-container *ngIf="volumes$ | async as volumes">
+    <ng-template #loadingVolumes>
+      <div class="text-center loadingVolumes">
+        <div class="spinner-border text-light"></div>
+      </div>  
+    </ng-template>
+    <ng-container *ngIf="volumes$ | async as volumes; else loadingVolumes">
       <app-lightweight-charts-area [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
     </ng-container>
   </div>

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

@@ -1,4 +1,10 @@
 #volumeHolder {
     height: 500px;
     background-color: #000;
+}
+
+.loadingVolumes {
+    position: relative;
+    top: 50%;
+    z-index: 100;
 }

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;