Add lazy loading indicator

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "license": "MIT",
   "private": true,
   "scripts": {

static/package.json

@@ -41,7 +41,6 @@
   "devDependencies": {
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
-    "@types/systemjs": "^0.20.4",
     "codelyzer": "~2.0.0-beta.1",
     "jasmine-core": "^2.5.2",
     "jasmine-spec-reporter": "^3.2.0",

static/src/app/app.component.html

@@ -87,6 +87,7 @@
 
 </div>
 <div class="content">
+  <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
   <div id="left">
     <router-outlet></router-outlet>
   </div>

static/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Router} from '@angular/router';
+import {NavigationEnd, NavigationStart, Router} from '@angular/router';
 import {LoginService} from './services/login-service/login-service';
 import {PromotionService} from "./services/promotion-service/promotion.service";
 import {AwardingService} from "./services/awarding-service/awarding.service";
@@ -8,16 +8,26 @@ import {RouteConfig} from "./app.config";
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  styleUrls: ['app.component.css', 'style/load-indicator.css']
 })
 export class AppComponent {
 
   config = RouteConfig;
 
+  loading: boolean = false;
+
   constructor(private loginService: LoginService,
               private promotionService: PromotionService,
               private awardingService: AwardingService,
               private router: Router) {
+    router.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        this.loading = true;
+      }
+      if (event instanceof NavigationEnd) {
+        this.loading = false;
+      }
+    });
   }
 
 

static/src/app/statistic/war-submit/war-submit.component.html

@@ -79,7 +79,7 @@
     Bestätigen
   </button>
 
-  <span *ngIf="loading" class="load-arrow glyphicon-refresh-animate"></span>
+  <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
   <span *ngIf="showErrorLabel"
         class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
         {{error}}

static/src/app/statistic/war-submit/war-submit.component.ts

@@ -8,7 +8,7 @@ import {War} from "../../models/model-interfaces";
 @Component({
   selector: 'war-submit',
   templateUrl: './war-submit.component.html',
-  styleUrls: ['./war-submit.component.css']
+  styleUrls: ['./war-submit.component.css', '../../style/load-indicator.css']
 })
 export class WarSubmitComponent {
 

static/src/app/style/load-indicator.css

@@ -0,0 +1,28 @@
+.load-indicator {
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  width:50%;
+}
+
+.load-arrow {
+  background: url(../../assets/loading.png) no-repeat;
+  display: block;
+  width: 80px;
+  height: 80px;
+}
+
+/* Loading Animation */
+.glyphicon-refresh-animate {
+  animation: spin 1.5s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}