start of progress indicator and animation

src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -8,13 +9,13 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { httpInterceptorProviders } from './http-interceptors';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StatusListComponent } from './lists/status-list/status-list.component';
 import { DeviceListComponent } from './lists/device-list/device-list.component';
 import { DonutChartComponent } from './charts/donut-chart/donut-chart.component';
@@ -52,6 +53,7 @@ import { FolderListComponent } from './lists/folder-list/folder-list.component';
     MatSortModule,
     MatButtonToggleModule,
     MatCardModule,
+    MatProgressBarModule,
     FlexLayoutModule,
     HttpClientModule,
     HttpClientXsrfModule.withOptions({

src/app/dashboard/dashboard.component.html

@@ -7,7 +7,8 @@
     <span>Tech UI</span>
   </div>
 </div>
-<div fxLayout="column" fxLayoutGap="16px" class="grid-container">
+<mat-progress-bar mode="determinate" value="20"></mat-progress-bar>
+<div fxLayout="column" fxLayoutGap="16px" class="grid-container" [@loading]="isLoading ? 'start' : 'done'">
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="space-between stretch">
     <app-chart [type]=folderChart fxFlex="50"></app-chart>
     <app-chart [type]=deviceChart fxFlex="50"></app-chart>

src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  animate,
+  transition,
+} from '@angular/animations';
 import { SystemConfigService } from '../services/system-config.service';
 import { StType } from '../type';
 import { FilterService } from '../services/filter.service';
@@ -7,11 +14,28 @@ import { FilterService } from '../services/filter.service';
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
-  providers: [FilterService]
+  providers: [FilterService],
+  animations: [
+    trigger('loading', [
+      state('start', style({
+        marginTop: '100px',
+      })),
+      state('done', style({
+        marginTop: '0px',
+      })),
+      transition('open => closed', [
+        animate('1s')
+      ]),
+      transition('closed => open', [
+        animate('0.5s')
+      ]),
+    ]),
+  ]
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnInit {
   folderChart: StType = StType.Folder;
   deviceChart: StType = StType.Device;
+  isLoading: boolean = true;
 
   constructor(private systemConfigService: SystemConfigService) { }
 
@@ -21,5 +45,7 @@ export class DashboardComponent {
       err => console.error('Observer got an error: ' + err),
       () => console.log('Observer got a complete notification')
     );
+
+    this.isLoading = false;
   }
 }

src/app/services/progress.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProgressService } from './progress.service';
+
+describe('ProgressService', () => {
+  let service: ProgressService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProgressService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/progress.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProgressService {
+
+  constructor() { }
+}