From d4508bd8768022b9434bb3391d1cf4eeaa39b35a Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Wed, 21 Apr 2021 20:22:34 +0400
Subject: [PATCH] Add loading spinners.

---
 .../bisq/bisq-dashboard/bisq-dashboard.component.html |  7 ++++++-
 .../bisq/bisq-dashboard/bisq-dashboard.component.scss |  6 ++++++
 .../app/bisq/bisq-market/bisq-market.component.html   | 10 +++++++++-
 .../app/bisq/bisq-market/bisq-market.component.scss   | 11 +++++++++++
 .../src/app/bisq/bisq-market/bisq-market.component.ts |  5 +++++
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
index 38ed7e2c6..03eb8df4a 100644
--- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
+++ b/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>
diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss
index 2680f5212..55ad9d40a 100644
--- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.html b/frontend/src/app/bisq/bisq-market/bisq-market.component.html
index 753ce21e1..b00aba800 100644
--- a/frontend/src/app/bisq/bisq-market/bisq-market.component.html
+++ b/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">
diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.scss b/frontend/src/app/bisq/bisq-market/bisq-market.component.scss
index 7db34cf90..2a7beb167 100644
--- a/frontend/src/app/bisq/bisq-market/bisq-market.component.scss
+++ b/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;
+}
diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts
index ff54d2a9c..de446f885 100644
--- a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts
+++ b/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;