diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html
index 6b5017785..99fb46934 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.html
@@ -1 +1,4 @@
-
+
+
\ No newline at end of file
diff --git a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
index 84aacb8c4..e4aa95492 100644
--- a/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
+++ b/frontend/src/app/components/lbtc-pegs-graph/lbtc-pegs-graph.component.ts
@@ -1,14 +1,22 @@
-import { Component, Inject, LOCALE_ID, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core';
+import { Component, Inject, LOCALE_ID, ChangeDetectionStrategy, Input, OnChanges, OnInit } from '@angular/core';
import { formatDate, formatNumber } from '@angular/common';
import { EChartsOption } from 'echarts';
@Component({
selector: 'app-lbtc-pegs-graph',
- styles: [`::ng-deep .tx-wrapper-tooltip-chart { width: 135px; }`],
+ styles: [`
+ ::ng-deep .tx-wrapper-tooltip-chart { width: 135px; }
+ .loadingGraphs {
+ position: absolute;
+ top: 50%;
+ left: calc(50% - 16px);
+ z-index: 100;
+ }
+ `],
templateUrl: './lbtc-pegs-graph.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class LbtcPegsGraphComponent implements OnChanges {
+export class LbtcPegsGraphComponent implements OnInit, OnChanges {
@Input() data: any;
pegsChartOptions: EChartsOption;
@@ -17,6 +25,7 @@ export class LbtcPegsGraphComponent implements OnChanges {
top: number | string = '20';
left: number | string = '50';
template: ('widget' | 'advanced') = 'widget';
+ isLoading = true;
pegsChartOption: EChartsOption = {};
pegsChartInitOption = {
@@ -27,6 +36,10 @@ export class LbtcPegsGraphComponent implements OnChanges {
@Inject(LOCALE_ID) private locale: string,
) { }
+ ngOnInit() {
+ this.isLoading = true;
+ }
+
ngOnChanges() {
if (!this.data) {
return;
@@ -34,6 +47,13 @@ export class LbtcPegsGraphComponent implements OnChanges {
this.pegsChartOptions = this.createChartOptions(this.data.series, this.data.labels);
}
+ rendered() {
+ if (!this.data) {
+ return;
+ }
+ this.isLoading = false;
+ }
+
createChartOptions(series: number[], labels: string[]): EChartsOption {
return {
grid: {