feat: chart spinner only shows while fetching

asfadmin · Sep 18, 2024 · d6cd0ed · d6cd0ed
1 parent bdbc15b
commit d6cd0ed
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html b/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html
@@ -139,7 +139,8 @@
 			[zoomIn$]="zoomInChart$"
 			[zoomToFit$]="zoomToFitChart$"
 			[zoomOut$]="zoomOutChart$"
-			[chartData]="chartData"></app-timeseries-chart>
+			[chartData]="chartData"
+			[isLoading]="isLoading"></app-timeseries-chart>
 		</div>
 	</div>
 

diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts
@@ -62,6 +62,8 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
   public dateRange = [];
   public totalPoints = 0;
 
+  public isLoading = false;
+
   constructor(
     private store$: Store<AppState>,
     private screenSize: ScreenSizeService,
@@ -180,8 +182,10 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
       this.timeseries_subscription.unsubscribe();
     }
     this.chartData.next(null);
+    this.isLoading = true;
     this.timeseries_subscription = this.netcdfService.getTimeSeries(geometry).pipe(first()).subscribe(data => {
       this.chartData.next(data);
+      this.isLoading = false;
 
       let test_products = [];
       this.totalPoints = Object.keys(data).length - 1;

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -4,7 +4,7 @@
 		<div #timeseriesChart id="timeseriesChart" >
 
 		</div>
-		@if(dataSource.length <= 0){
+		@if(isLoading){
 			<div class="disp-spinner">
 				<mat-spinner></mat-spinner>
 			</div>

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts
@@ -45,6 +45,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
 
 
   private selectedScene: string;
+  @Input() isLoading: boolean = false;
 
   private subs = new SubSink();
   constructor(