Add loading behavior

Display/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule, MatExpansionModule, MatSelectModule, MatDatepickerModule, MatInputModule } from '@angular/material';
+import { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule, MatExpansionModule, MatSelectModule, MatDatepickerModule, MatInputModule, MatProgressSpinnerModule } from '@angular/material';
 import { NavComponent } from './components/nav/nav.component';
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -51,7 +51,8 @@ const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options:
         MatInputModule,
         FormsModule,
         ReactiveFormsModule,
-        MatMomentDateModule
+        MatMomentDateModule,
+        MatProgressSpinnerModule
     ],
     providers: [],
     bootstrap: [AppComponent]

Display/src/app/components/weather/charts/weather-charts.component.html

@@ -1,15 +1,13 @@
-<!-- <div [hidden]="!loading" class="page-spinner">
-    <span class="spinner"></span>
-</div> -->
+<mat-spinner *ngIf="loading && !chart" class="content-spinner" strokeWidth="5"></mat-spinner>
 <div class="chart-content">
     <header class="chart-header">
         <mat-form-field>
-            <mat-select [(value)]="selectedTimeSpan">
+            <mat-select [(value)]="selectedTimeSpan" [disabled]="loading">
                 <mat-option *ngFor="let item of timeSpanItems | keyvalue" [value]="+item.key">{{ item.value }}</mat-option>
             </mat-select>
         </mat-form-field>
         <span class="chart-button-spacer"></span>
-        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)">
+        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)" [disabled]="loading">
             <mat-icon>arrow_back</mat-icon>
         </button>
         <mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
@@ -17,13 +15,13 @@
             <mat-datepicker-toggle matSuffix [for]="picker">
                 <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
             </mat-datepicker-toggle>
-            <mat-datepicker #picker disabled="false"></mat-datepicker>
+            <mat-datepicker #picker [disabled]="loading"></mat-datepicker>
         </mat-form-field>
-        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)">
+        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)" [disabled]="loading">
             <mat-icon>arrow_forward</mat-icon>
         </button>
         <span class="chart-button-spacer"></span>
-        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()">
+        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()" [disabled]="loading">
             Today
         </button>
     </header>

Display/src/app/components/weather/charts/weather-charts.component.ts

@@ -85,6 +85,12 @@ export class WeatherChartsComponent implements OnInit {
         let start: moment.Moment;
         let end: moment.Moment;
 
+        this.loading = true;
+
+        if (this.chart) {
+            this.chart.ref$.subscribe(o => o.showLoading());
+        }
+
         switch (this.selectedTimeSpan) {
             case TimeSpan.Last24Hours: {
                 start = moment().subtract(24, 'hour');

Display/src/styles.scss

@@ -7,3 +7,9 @@ body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
+
+.content-spinner {
+  position: absolute !important;
+  top: 150px;
+  left: calc(50% - 50px);
+}