<!--<div class="grid-container" gdAreas="header header | folders devices | status-list status-list | footer footer"
  gdGap="16px" gdRows="auto auto auto"> -->
<!--<div class="grid-container" fxLayout="row" fxLayoutGap="16px grid" fxLayoutAlign="stretch">-->

<div class="progress">
  <mat-progress-bar mode="determinate" value="{{progressValue}}" [@progressBar]="isLoading ? 'start' : 'done'">
  </mat-progress-bar>
</div>
<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>
  </div>
  <app-status-list gdArea="status-list"></app-status-list>
  <div></div>
</div>