diff --git a/src/app/modules/reporting/report/report-object/report-object.component.html b/src/app/modules/reporting/report/report-object/report-object.component.html
index 0812227c..6346b671 100644
--- a/src/app/modules/reporting/report/report-object/report-object.component.html
+++ b/src/app/modules/reporting/report/report-object/report-object.component.html
@@ -31,149 +31,151 @@
             {{queryDevice.display_name || queryDevice?.display_name}}/{{queryService.name}}/{{data.query!.columns[0].name}}
         </mat-panel-description>
     </mat-expansion-panel-header>
-    <div fxLayout="column">
-        <div fxLayout="row">
-            <mat-radio-group
-                *ngIf="data.valueType === 'string' || data.valueType === 'float64' || data.valueType === 'array'"
-                [(ngModel)]="inputType" (ngModelChange)="changeInputType()" aria-label="Select an option">
-                <mat-radio-button value="value">Value</mat-radio-button>
-                <mat-radio-button value="query">Query</mat-radio-button>
-            </mat-radio-group>
-            <button *ngIf="inputType === 'query' && data.query !== undefined" mat-icon-button matTooltip="Preview Query"
-                (click)="previewQuery()">
-                <mat-icon>preview</mat-icon>
-            </button>
-        </div>
-        <div *ngIf="inputType === 'query' && data.query !== undefined" fxLayout="column">
-            <mat-form-field fxFlex color="accent" appearance="outline">
-                <mat-label>Device</mat-label>
-                <senergy-select-search [options]="allDevices" [getOptionViewValue]="getDeviceName"
-                    ngDefaultControl (ngModelChange)="queryDeviceChanged($event).subscribe()" [(ngModel)]="queryDevice"
-                    [multiple]="false">
-                </senergy-select-search>
-                <mat-error senergyError label="Device"></mat-error>
-            </mat-form-field>
-            <mat-form-field fxFlex color="accent" appearance="outline">
-                <mat-label>Service</mat-label>
-                <senergy-select-search (ngModelChange)="queryServiceChanged($event)"
-                    [(ngModel)]="queryService" [options]="queryDeviceType.services" useOptionViewProperty="name">
-                </senergy-select-search>
-                <mat-error senergyError label="Service"></mat-error>
-            </mat-form-field>
-            <mat-form-field fxFill color="accent" appearance="outline" *ngIf="data.query.columns !== undefined">
-                <mat-label>Path</mat-label>
-                <input matInput [(ngModel)]="data.query!.columns[0].name" placeholder="Choose or write yourself"
-                    [matAutocomplete]="auto" />
-                <mat-autocomplete #auto="matAutocomplete">
-                    <mat-option *ngFor="let path of queryServicePaths | keyvalue"
-                        [value]="path.value">{{path.value}}</mat-option>
-                </mat-autocomplete>
-                <mat-error senergyError label="Path"></mat-error>
-            </mat-form-field>
-            <mat-form-field fxFill color="accent" appearance="outline" *ngIf="data.query.columns !== undefined">
-                <mat-label>Field Group Type</mat-label>
-                <mat-select [(ngModel)]="data.query!.columns[0].groupType">
-                    <mat-option *ngFor="let type of fieldGroupTypes" [value]="type">{{type}}</mat-option>
-                </mat-select>
-                <mat-error senergyError label="Field Group Type"></mat-error>
-            </mat-form-field>
-            <div role="group" class="form-grouping">
-                <mat-form-field fxFlex color="accent" appearance="outline">
-                    <mat-label>Grouping Time</mat-label>
-                    <input matInput [(ngModel)]="groupingTime.number" (ngModelChange)="setGroupingTime()">
-                    <mat-error senergyError label="Grouping Time"></mat-error>
-                </mat-form-field>
-                <mat-form-field fxFlex color="accent" appearance="outline">
-                    <mat-label>Grouping Time Unit</mat-label>
-                    <mat-select [(ngModel)]="groupingTime.unit" (ngModelChange)="setGroupingTime()">
-                        <mat-option *ngFor="let units of timeUnits" [value]="units.unit">{{units.desc}}</mat-option>
-                    </mat-select>
-                    <mat-error senergyError label="Grouping Time Unit"></mat-error>
-                </mat-form-field>
+    <ng-template matExpansionPanelContent>
+        <div fxLayout="column">
+            <div fxLayout="row">
+                <mat-radio-group
+                    *ngIf="data.valueType === 'string' || data.valueType === 'float64' || data.valueType === 'array'"
+                    [(ngModel)]="inputType" (ngModelChange)="changeInputType()" aria-label="Select an option">
+                    <mat-radio-button value="value">Value</mat-radio-button>
+                    <mat-radio-button value="query">Query</mat-radio-button>
+                </mat-radio-group>
+                <button *ngIf="inputType === 'query' && data.query !== undefined" mat-icon-button matTooltip="Preview Query"
+                    (click)="previewQuery()">
+                    <mat-icon>preview</mat-icon>
+                </button>
             </div>
-            <div role="group" class="form-grouping">
+            <div *ngIf="inputType === 'query' && data.query !== undefined" fxLayout="column">
                 <mat-form-field fxFlex color="accent" appearance="outline">
-                    <mat-label>Time Frame</mat-label>
-                    <input matInput [(ngModel)]="timeframe.number" (ngModelChange)="setTimeframe()">
-                    <mat-error senergyError label="Time Frame"></mat-error>
+                    <mat-label>Device</mat-label>
+                    <senergy-select-search [options]="allDevices" [getOptionViewValue]="getDeviceName"
+                        ngDefaultControl (ngModelChange)="queryDeviceChanged($event).subscribe()" [(ngModel)]="queryDevice"
+                        [multiple]="false">
+                    </senergy-select-search>
+                    <mat-error senergyError label="Device"></mat-error>
                 </mat-form-field>
                 <mat-form-field fxFlex color="accent" appearance="outline">
-                    <mat-label>Time Frame Unit</mat-label>
-                    <mat-select [(ngModel)]="timeframe.unit" (ngModelChange)="setTimeframe()">
-                        <mat-option *ngFor="let units of timeUnits" [value]="units.unit">{{units.desc}}</mat-option>
-                    </mat-select>
-                    <mat-error senergyError label="Time Frame Unit"></mat-error>
+                    <mat-label>Service</mat-label>
+                    <senergy-select-search (ngModelChange)="queryServiceChanged($event)"
+                        [(ngModel)]="queryService" [options]="queryDeviceType.services" useOptionViewProperty="name">
+                    </senergy-select-search>
+                    <mat-error senergyError label="Service"></mat-error>
                 </mat-form-field>
-            </div>
-            <div role="group" class="form-grouping">
-                <mat-form-field fxFlex color="accent" appearance="outline">
-                    <mat-label>Start Date</mat-label>
-                    <input matInput [matDatepicker]="picker_start" [(ngModel)]="data.query!.time!.start"
-                           (ngModelChange)="setStartOffset()">
-                    <mat-hint>DD/MM/YYYY</mat-hint>
-                    <mat-datepicker-toggle matIconSuffix [for]="picker_start"></mat-datepicker-toggle>
-                    <mat-datepicker #picker_start></mat-datepicker>
-                    <mat-error senergyError label="Start Date"></mat-error>
+                <mat-form-field fxFill color="accent" appearance="outline" *ngIf="data.query.columns !== undefined">
+                    <mat-label>Path</mat-label>
+                    <input matInput [(ngModel)]="data.query!.columns[0].name" placeholder="Choose or write yourself"
+                        [matAutocomplete]="auto" />
+                    <mat-autocomplete #auto="matAutocomplete">
+                        <mat-option *ngFor="let path of queryServicePaths | keyvalue"
+                            [value]="path.value">{{path.value}}</mat-option>
+                    </mat-autocomplete>
+                    <mat-error senergyError label="Path"></mat-error>
                 </mat-form-field>
-                <mat-form-field>
-                    <mat-label>Rolling Start Date</mat-label>
-                    <mat-select [(ngModel)]="data.queryOptions!.rollingStartDate"
-                                (ngModelChange)="setStartOffset()">
-                        <mat-option [value]="''"></mat-option>
-                        <mat-option [value]="'month'">Monat</mat-option>
-                        <mat-option [value]="'year'">Jahr</mat-option>
+                <mat-form-field fxFill color="accent" appearance="outline" *ngIf="data.query.columns !== undefined">
+                    <mat-label>Field Group Type</mat-label>
+                    <mat-select [(ngModel)]="data.query!.columns[0].groupType">
+                        <mat-option *ngFor="let type of fieldGroupTypes" [value]="type">{{type}}</mat-option>
                     </mat-select>
-                    <mat-error senergyError label="Rolling Start Date"></mat-error>
-                </mat-form-field>
-                <mat-form-field fxFlex color="accent" appearance="outline">
-                    <mat-label>End Date</mat-label>
-                    <input matInput [matDatepicker]="picker_end" [(ngModel)]="data.query!.time!.end"
-                           (ngModelChange)="setEndOffset()">
-                    <mat-hint>DD/MM/YYYY</mat-hint>
-                    <mat-datepicker-toggle matIconSuffix [for]="picker_end"></mat-datepicker-toggle>
-                    <mat-datepicker #picker_end></mat-datepicker>
-                    <mat-error senergyError label="End Date"></mat-error>
-                </mat-form-field>
-                <mat-form-field>
-                    <mat-label>Rolling End Date</mat-label>
-                    <mat-select [(ngModel)]="data.queryOptions!.rollingEndDate"
-                                (ngModelChange)="setEndOffset()">
-                        <mat-option [value]="''"></mat-option>
-                        <mat-option [value]="'month'">Monat</mat-option>
-                        <mat-option [value]="'year'">Jahr</mat-option>
-                    </mat-select>
-                    <mat-error senergyError label="Rolling End Date"></mat-error>
+                    <mat-error senergyError label="Field Group Type"></mat-error>
                 </mat-form-field>
+                <div role="group" class="form-grouping">
+                    <mat-form-field fxFlex color="accent" appearance="outline">
+                        <mat-label>Grouping Time</mat-label>
+                        <input matInput [(ngModel)]="groupingTime.number" (ngModelChange)="setGroupingTime()">
+                        <mat-error senergyError label="Grouping Time"></mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex color="accent" appearance="outline">
+                        <mat-label>Grouping Time Unit</mat-label>
+                        <mat-select [(ngModel)]="groupingTime.unit" (ngModelChange)="setGroupingTime()">
+                            <mat-option *ngFor="let units of timeUnits" [value]="units.unit">{{units.desc}}</mat-option>
+                        </mat-select>
+                        <mat-error senergyError label="Grouping Time Unit"></mat-error>
+                    </mat-form-field>
+                </div>
+                <div role="group" class="form-grouping">
+                    <mat-form-field fxFlex color="accent" appearance="outline">
+                        <mat-label>Time Frame</mat-label>
+                        <input matInput [(ngModel)]="timeframe.number" (ngModelChange)="setTimeframe()">
+                        <mat-error senergyError label="Time Frame"></mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex color="accent" appearance="outline">
+                        <mat-label>Time Frame Unit</mat-label>
+                        <mat-select [(ngModel)]="timeframe.unit" (ngModelChange)="setTimeframe()">
+                            <mat-option *ngFor="let units of timeUnits" [value]="units.unit">{{units.desc}}</mat-option>
+                        </mat-select>
+                        <mat-error senergyError label="Time Frame Unit"></mat-error>
+                    </mat-form-field>
+                </div>
+                <div role="group" class="form-grouping">
+                    <mat-form-field fxFlex color="accent" appearance="outline">
+                        <mat-label>Start Date</mat-label>
+                        <input matInput [matDatepicker]="picker_start" [(ngModel)]="data.query!.time!.start"
+                               (ngModelChange)="setStartOffset()">
+                        <mat-hint>DD/MM/YYYY</mat-hint>
+                        <mat-datepicker-toggle matIconSuffix [for]="picker_start"></mat-datepicker-toggle>
+                        <mat-datepicker #picker_start></mat-datepicker>
+                        <mat-error senergyError label="Start Date"></mat-error>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-label>Rolling Start Date</mat-label>
+                        <mat-select [(ngModel)]="data.queryOptions!.rollingStartDate"
+                                    (ngModelChange)="setStartOffset()">
+                            <mat-option [value]="''"></mat-option>
+                            <mat-option [value]="'month'">Monat</mat-option>
+                            <mat-option [value]="'year'">Jahr</mat-option>
+                        </mat-select>
+                        <mat-error senergyError label="Rolling Start Date"></mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex color="accent" appearance="outline">
+                        <mat-label>End Date</mat-label>
+                        <input matInput [matDatepicker]="picker_end" [(ngModel)]="data.query!.time!.end"
+                               (ngModelChange)="setEndOffset()">
+                        <mat-hint>DD/MM/YYYY</mat-hint>
+                        <mat-datepicker-toggle matIconSuffix [for]="picker_end"></mat-datepicker-toggle>
+                        <mat-datepicker #picker_end></mat-datepicker>
+                        <mat-error senergyError label="End Date"></mat-error>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-label>Rolling End Date</mat-label>
+                        <mat-select [(ngModel)]="data.queryOptions!.rollingEndDate"
+                                    (ngModelChange)="setEndOffset()">
+                            <mat-option [value]="''"></mat-option>
+                            <mat-option [value]="'month'">Monat</mat-option>
+                            <mat-option [value]="'year'">Jahr</mat-option>
+                        </mat-select>
+                        <mat-error senergyError label="Rolling End Date"></mat-error>
+                    </mat-form-field>
+                </div>
             </div>
-        </div>
 
-        <div *ngIf="inputType === 'value'" fxLayout="column">
-            <div *ngIf="data.valueType === 'string'">
-                <mat-form-field fxFlex color="accent" appearance="outline">
-                    <mat-label>{{ name }} String</mat-label>
-                    <input matInput [(ngModel)]="data.value">
-                    <mat-error senergyError label="{{ name }} String"></mat-error>
-                </mat-form-field>
-            </div>
-            <div *ngIf="data.valueType === 'float64'">
-                <mat-form-field fxFlex color="accent" appearance="outline">
-                    <mat-label>{{ name }} Float64</mat-label>
-                    <input matInput [(ngModel)]="data.value">
-                    <mat-error senergyError label="{{ name }} Float64"></mat-error>
-                </mat-form-field>
-            </div>
-            <div *ngIf="data.valueType === 'object' && data.fields !== undefined">
+            <div *ngIf="inputType === 'value'" fxLayout="column">
+                <div *ngIf="data.valueType === 'string'">
+                    <mat-form-field fxFlex color="accent" appearance="outline">
+                        <mat-label>{{ name }} String</mat-label>
+                        <input matInput [(ngModel)]="data.value">
+                        <mat-error senergyError label="{{ name }} String"></mat-error>
+                    </mat-form-field>
+                </div>
+                <div *ngIf="data.valueType === 'float64'">
+                    <mat-form-field fxFlex color="accent" appearance="outline">
+                        <mat-label>{{ name }} Float64</mat-label>
+                        <input matInput [(ngModel)]="data.value">
+                        <mat-error senergyError label="{{ name }} Float64"></mat-error>
+                    </mat-form-field>
+                </div>
+                <div *ngIf="data.valueType === 'object' && data.fields !== undefined">
 
-                <senergy-reporting-object *ngFor="let element of data.fields | keyvalue" [requestObject]="requestObject"
-                    [name]="element.key" [data]="element.value" [allDevices]="allDevices">
-                </senergy-reporting-object>
-            </div>
-            <div *ngIf="data.valueType === 'array' && data.children !== undefined">
-                <senergy-reporting-object *ngFor="let element of data.children | keyvalue"
-                    [requestObject]="requestObject" [name]="element.key" [data]="element.value"
-                    [allDevices]="allDevices">
-                </senergy-reporting-object>
+                    <senergy-reporting-object *ngFor="let element of data.fields | keyvalue" [requestObject]="requestObject"
+                        [name]="element.key" [data]="element.value" [allDevices]="allDevices">
+                    </senergy-reporting-object>
+                </div>
+                <div *ngIf="data.valueType === 'array' && data.children !== undefined">
+                    <senergy-reporting-object *ngFor="let element of data.children | keyvalue"
+                        [requestObject]="requestObject" [name]="element.key" [data]="element.value"
+                        [allDevices]="allDevices">
+                    </senergy-reporting-object>
+                </div>
             </div>
         </div>
-    </div>
+    </ng-template>
 </mat-expansion-panel>
\ No newline at end of file
diff --git a/src/app/modules/reporting/report/report.component.html b/src/app/modules/reporting/report/report.component.html
index dd3060e8..a59b0dba 100644
--- a/src/app/modules/reporting/report/report.component.html
+++ b/src/app/modules/reporting/report/report.component.html
@@ -15,77 +15,80 @@
   -->
 
 <div class="main-panel" fxLayout="column">
-    <div class="button-header background-color-accent">
-        <div fxLayout="column">
-            <button mat-icon-button matTooltip="Save" (click)="save()" *ngIf="reportId === null">
-                <mat-icon>save</mat-icon>
-            </button>
-            <button mat-icon-button matTooltip="Update" (click)="update()" *ngIf="reportId !== null">
-                <mat-icon>save</mat-icon>
-            </button>
-        </div>
-    </div>
-    <div class="layout-margin" fxLayout="column">
-        <div *ngIf="report.createdAt !== undefined" fxLayout="row" fxLayoutAlign="end center" style="margin-bottom: 10px;">
-            <mat-icon>calendar_today</mat-icon>{{report.createdAt| date:"medium"}}
-            <mat-icon style="margin-left: 6px;">update</mat-icon>{{report.updatedAt| date:"medium"}}
+    <senergy-spinner [show]="!ready"></senergy-spinner>
+    <div [hidden]="!ready">
+        <div class="button-header background-color-accent">
+            <div fxLayout="column">
+                <button mat-icon-button matTooltip="Save" (click)="save()" *ngIf="reportId === null">
+                    <mat-icon>save</mat-icon>
+                </button>
+                <button mat-icon-button matTooltip="Update" (click)="update()" *ngIf="reportId !== null">
+                    <mat-icon>save</mat-icon>
+                </button>
+            </div>
         </div>
-        <mat-card>
-            <mat-card-content>
-                <div fxLayout="column">
-                    <div style="margin-bottom: 10px">
-                        Template Name: {{ template.name }} Id: {{templateId}}
-                    </div>
-                    <mat-form-field fxFlex color="accent" appearance="outline">
-                        <mat-label>Report Name</mat-label>
-                        <input matInput [(ngModel)]="reportName">
-                        <mat-error senergyError label="Report Name"></mat-error>
-                    </mat-form-field>
-                    <mat-form-field fxFlex color="accent" appearance="outline">
-                        <mat-label>Cron Schedule</mat-label>
-                        <input matInput [(ngModel)]="cron">
-                        <mat-error senergyError label="Cron Schedule"></mat-error>
-                    </mat-form-field>
-                    <mat-form-field fxFlex color="accent" appearance="outline">
-                        <mat-label>E-Mail Subject</mat-label>
-                        <input matInput [(ngModel)]="emailSubject">
-                        <mat-error senergyError label="E-Mail Subject"></mat-error>
-                    </mat-form-field>
-                    <mat-form-field fxFlex color="accent" appearance="outline">
-                        <mat-label>E-Mail Text</mat-label>
-                        <textarea  matInput [(ngModel)]="emailText"></textarea>
-                        <mat-error senergyError label="E-Mail Text"></mat-error>
-                    </mat-form-field>
-                    <mat-form-field fxFlex color="accent" appearance="outline">
-                        <mat-label>E-Mail HTML</mat-label>
-                        <textarea  matInput [(ngModel)]="emailHTML"></textarea>
-                        <mat-error senergyError label="E-Mail HTML"></mat-error>
-                    </mat-form-field>
-                    <div *ngFor="let email of emailReceivers; trackBy: trackByIndex; let i = index">
+        <div class="layout-margin" fxLayout="column">
+            <div *ngIf="report.createdAt !== undefined" fxLayout="row" fxLayoutAlign="end center" style="margin-bottom: 10px;">
+                <mat-icon>calendar_today</mat-icon>{{report.createdAt| date:"medium"}}
+                <mat-icon style="margin-left: 6px;">update</mat-icon>{{report.updatedAt| date:"medium"}}
+            </div>
+            <mat-card>
+                <mat-card-content>
+                    <div fxLayout="column">
+                        <div style="margin-bottom: 10px">
+                            Template Name: {{ template.name }} Id: {{templateId}}
+                        </div>
+                        <mat-form-field fxFlex color="accent" appearance="outline">
+                            <mat-label>Report Name</mat-label>
+                            <input matInput [(ngModel)]="reportName">
+                            <mat-error senergyError label="Report Name"></mat-error>
+                        </mat-form-field>
                         <mat-form-field fxFlex color="accent" appearance="outline">
-                            <mat-label>E-Mail Address</mat-label>
-                            <input type="email" matInput [(ngModel)]="emailReceivers![i]">
-                            <mat-error senergyError label="E-Mail Receiver"></mat-error>
+                            <mat-label>Cron Schedule</mat-label>
+                            <input matInput [(ngModel)]="cron">
+                            <mat-error senergyError label="Cron Schedule"></mat-error>
                         </mat-form-field>
-                        <button mat-icon-button style="padding-top: 1.5rem;" (click)="deleteEmailAddress(i)">
-                            <mat-icon>delete</mat-icon>
-                          </button>
+                        <mat-form-field fxFlex color="accent" appearance="outline">
+                            <mat-label>E-Mail Subject</mat-label>
+                            <input matInput [(ngModel)]="emailSubject">
+                            <mat-error senergyError label="E-Mail Subject"></mat-error>
+                        </mat-form-field>
+                        <mat-form-field fxFlex color="accent" appearance="outline">
+                            <mat-label>E-Mail Text</mat-label>
+                            <textarea  matInput [(ngModel)]="emailText"></textarea>
+                            <mat-error senergyError label="E-Mail Text"></mat-error>
+                        </mat-form-field>
+                        <mat-form-field fxFlex color="accent" appearance="outline">
+                            <mat-label>E-Mail HTML</mat-label>
+                            <textarea  matInput [(ngModel)]="emailHTML"></textarea>
+                            <mat-error senergyError label="E-Mail HTML"></mat-error>
+                        </mat-form-field>
+                        <div *ngFor="let email of emailReceivers; trackBy: trackByIndex; let i = index">
+                            <mat-form-field fxFlex color="accent" appearance="outline">
+                                <mat-label>E-Mail Address</mat-label>
+                                <input type="email" matInput [(ngModel)]="emailReceivers![i]">
+                                <mat-error senergyError label="E-Mail Receiver"></mat-error>
+                            </mat-form-field>
+                            <button mat-icon-button style="padding-top: 1.5rem;" (click)="deleteEmailAddress(i)">
+                                <mat-icon>delete</mat-icon>
+                              </button>
+                        </div>
+                        <button mat-stroked-button (click)="addEmailAddress()">Add E-Mail Address</button>
                     </div>
-                    <button mat-stroked-button (click)="addEmailAddress()">Add E-Mail Address</button>
-                </div>
-            </mat-card-content>
-        </mat-card>
+                </mat-card-content>
+            </mat-card>
 
-        <div *ngIf="template.data !== undefined">
-            <senergy-reporting-object *ngFor="let element of template.data.dataStructured | keyvalue"
-                                    [requestObject]="requestObject"
-                                    [name]="element.key"
-                                    [data]="element.value"
-                                    [allDevices]="allDevices">
-            </senergy-reporting-object>
+            <div *ngIf="template.data !== undefined">
+                <senergy-reporting-object *ngFor="let element of template.data.dataStructured | keyvalue"
+                                        [requestObject]="requestObject"
+                                        [name]="element.key"
+                                        [data]="element.value"
+                                        [allDevices]="allDevices">
+                </senergy-reporting-object>
+            </div>
+            <button mat-fab class="fab" (click)="create()" matTooltip="Create Report">
+                <mat-icon>create</mat-icon>
+            </button>
         </div>
-        <button mat-fab class="fab" (click)="create()" matTooltip="Create Report">
-            <mat-icon>create</mat-icon>
-        </button>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/modules/reporting/report/report.component.ts b/src/app/modules/reporting/report/report.component.ts
index 58e93934..2cc62dec 100644
--- a/src/app/modules/reporting/report/report.component.ts
+++ b/src/app/modules/reporting/report/report.component.ts
@@ -29,6 +29,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { DeviceInstancesService } from '../../devices/device-instances/shared/device-instances.service';
 import { DeviceInstanceModel } from '../../devices/device-instances/shared/device-instances.model';
 import { number } from 'yargs';
+import {Observable} from 'rxjs';
 
 @Component({
     selector: 'senergy-reporting-new',
@@ -83,6 +84,7 @@ export class ReportComponent implements OnInit {
                         if (resp2 !== null) {
                             this.template.name = resp2.data.name;
                         }
+                        this.ready = true;
                     });
                 }
             });
@@ -92,9 +94,9 @@ export class ReportComponent implements OnInit {
                 if (resp !== null) {
                     this.template = resp.data;
                 }
+                this.ready = true;
             });
         }
-        this.ready = true;
     }
 
     create() {