fix(route): Add please wait on lazy route changes as on first load ap…

…plication
rucken · Apr 21, 2017 · 48f37f9 · 48f37f9
1 parent b850a63
commit 48f37f9
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 33 deletions.
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -1,4 +1,2 @@
 <demo-navbar></demo-navbar>
-<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)">
-  <router-outlet #outlet="outlet"></router-outlet>
-</div>
+<router-outlet></router-outlet>
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -1,36 +1,53 @@
 import { AppService, AlertModalComponent, AppComponent, RuckenRuI18n } from '../../../src';
 import { Component, ViewContainerRef, ComponentFactoryResolver, Input, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { trigger, animate, style, group, transition, query } from '@angular/animations';
 import * as _ from 'lodash';
+import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 
 @Component({
   selector: 'demo-app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   entryComponents: [AlertModalComponent],
-  encapsulation: ViewEncapsulation.None, animations: [
-    trigger('routerAnimations', [
-      transition('* => *', [
-        group([
-          query(':leave', style({ zIndex: 100 })),
-          query(':enter', style({ transform: 'translateY(100%)' }))
-        ])
-      ])
-    ])
-  ]
+  encapsulation: ViewEncapsulation.None
 })
 export class DemoAppComponent extends AppComponent {
   @Input()
   autoLoadLang?: boolean = true;
+  public pleaseWaitVisible: boolean = false;
   public constructor(
     public viewContainerRef: ViewContainerRef,
     public app: AppService,
     public resolver: ComponentFactoryResolver,
-    public translateService: TranslateService
+    public translateService: TranslateService,
+    public router: Router
   ) {
     super(viewContainerRef, app, resolver, translateService);
+
+    router.events.subscribe((evt) => {
+      if (evt instanceof NavigationStart) {
+        if (window['showPleaseWait']) {
+          this.pleaseWaitVisible = true;
+          setTimeout(() => {
+            if (!this.pleaseWaitVisible) {
+              return;
+            }
+            window['showPleaseWait'](this.translateService.instant('Loading...'));
+          }, 200);
+        }
+      }
+      if (evt instanceof NavigationEnd) {
+        this.pleaseWaitVisible = false;
+        document.body.scrollTop = 0;
+        if (window && window['loading_screen'] && window['loading_screen'].finish !== false) {
+          window['loading_screen'].finish();
+        } else {
+          window['loading_screen'] = false;
+        }
+      }
+    });
   }
+
   init() {
     if (window && window['loading_screen'] && window['loading_screen'].finish !== false) {
       window['loading_screen'].finish();

diff --git a/demo/src/assets/js/default.js b/demo/src/assets/js/default.js
@@ -63,7 +63,8 @@ function getVersion() {
   }
   return false;
 }
-function showPleaseWait() {
+function showPleaseWait(message) {
+  console.log(message);
   if (window.loading_screen === false) {
     return;
   }
@@ -73,14 +74,18 @@ function showPleaseWait() {
   var spinner = getRandomSpinner();
   var loadingHtml = [];
   loadingHtml.push('<h1 style="color:' + style.color + '">' + document.title + '</h1>');
-  if (version !== false && localVersion === false) {
-    loadingHtml.push('<h5 style="color:' + style.color + '">Version: ' + version + '</h5>');
-  }
-  if (version !== false && localVersion !== false && version === localVersion) {
-    loadingHtml.push('<h5 style="color:' + style.color + '">Version: ' + version + '</h5>');
-  }
-  if (version !== false && localVersion !== false && version !== localVersion) {
-    loadingHtml.push('<h5 style="color:' + style.color + '">Updating...</h5>');
+  if (!message) {
+    if (version !== false && localVersion === false) {
+      loadingHtml.push('<h5 style="color:' + style.color + '">Version: ' + version + '</h5>');
+    }
+    if (version !== false && localVersion !== false && version === localVersion) {
+      loadingHtml.push('<h5 style="color:' + style.color + '">Version: ' + version + '</h5>');
+    }
+    if (version !== false && localVersion !== false && version !== localVersion) {
+      loadingHtml.push('<h5 style="color:' + style.color + '">Updating...</h5>');
+    }
+  } else {
+    loadingHtml.push('<h5 style="color:' + style.color + '">' + message + '</h5>');
   }
   loadingHtml.push('<br/>');
   loadingHtml.push(spinner);

diff --git a/src/shared/app.service.ts b/src/shared/app.service.ts
@@ -1,5 +1,4 @@
 import { Injectable, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
-import { Router, NavigationEnd, Event } from '@angular/router';
 import { EndpointHelper } from './helpers/endpoint.helper';
 import { TranslateService } from '@ngx-translate/core';
 @Injectable()
@@ -11,14 +10,7 @@ export class AppService {
   public endpointHelper: EndpointHelper
   public translate: TranslateService
   private createdModals: any = {};
-  constructor(public _router: Router) {
-    _router.events.subscribe((evt) => {
-      if (!(evt instanceof NavigationEnd)) {
-        return;
-      }
-      document.body.scrollTop = 0;
-    });
-  }
+
   set localVersion(value: string) {
     localStorage.setItem('version', value);
   }