mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-01-19 14:45:28 +01:00
Code Issues Projects Releases Wiki Activity

Add loading spinners.

Browse Source
This commit is contained in:
softsimon 2021-04-21 20:22:34 +04:00
parent 6b5b80f866
commit d4508bd876
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
5 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
View File

@ -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>

6
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss
View File

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

10
frontend/src/app/bisq/bisq-market/bisq-market.component.html
View File

@ -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">

11
frontend/src/app/bisq/bisq-market/bisq-market.component.scss
View File

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

5
frontend/src/app/bisq/bisq-market/bisq-market.component.ts
View File

@ -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;