diff --git a/Display/src/app/app.module.ts b/Display/src/app/app.module.ts
index aa6d5ba..58ecbe6 100644
--- a/Display/src/app/app.module.ts
+++ b/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]
diff --git a/Display/src/app/components/weather/charts/weather-charts.component.html b/Display/src/app/components/weather/charts/weather-charts.component.html
index 649264e..92854d0 100644
--- a/Display/src/app/components/weather/charts/weather-charts.component.html
+++ b/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>
diff --git a/Display/src/app/components/weather/charts/weather-charts.component.ts b/Display/src/app/components/weather/charts/weather-charts.component.ts
index 2baf4a9..225475e 100644
--- a/Display/src/app/components/weather/charts/weather-charts.component.ts
+++ b/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');
diff --git a/Display/src/styles.scss b/Display/src/styles.scss
index 71bdd53..6d344d6 100644
--- a/Display/src/styles.scss
+++ b/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);
+}