feat(preloader): preloader service which can take a list of promises and execute smth once all promises are completed

src/app/app.component.ts

@@ -7,6 +7,9 @@ import {Pages} from './pages';
 import {AppState} from './app.state';
 import {BaThemeConfigProvider, BaThemeConfig, BaThemeSpinner} from './theme';
 import {BaThemeRun} from './theme/directives';
+import {BaImageLoaderService, BaThemePreloader} from './theme/services';
+
+import {layoutPaths} from './theme/theme.constants';
 
 /*
  * App Component
@@ -16,7 +19,7 @@ import {BaThemeRun} from './theme/directives';
   selector: 'app',
   pipes: [],
   directives: [BaThemeRun],
-  providers: [BaThemeConfigProvider, BaThemeConfig, BaThemeSpinner],
+  providers: [BaThemeConfigProvider, BaThemeConfig, BaImageLoaderService, BaThemeSpinner],
   encapsulation: ViewEncapsulation.None,
   styles: [require('normalize.css'), require('./app.scss')],
   template: `
@@ -38,14 +41,23 @@ export class App {
 
   isMenuCollapsed:boolean = false;
 
-  constructor(private _state:AppState, private _baThemeConfig:BaThemeConfig, private _baSpinner:BaThemeSpinner) {
+  constructor(private _state:AppState, private _imageLoader:BaImageLoaderService, private _spinner:BaThemeSpinner) {
+    this._loadImages();
 
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
       this.isMenuCollapsed = isCollapsed;
     });
   }
 
-  ngAfterViewInit() {
+  public ngAfterViewInit():void {
-    this._baSpinner.hide(200);
+    // hide spinner once all loaders are completed
+    BaThemePreloader.load().then((values) => {
+      this._spinner.hide();
+    });
+  }
+
+  private _loadImages():void {
+    // register some loaders
+    BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
   }
 }

src/app/theme/components/baAmChart/baAmChart.component.ts

@@ -1,5 +1,7 @@
 import {Component, ViewChild, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core';
 
+import {BaThemePreloader} from '../../../theme/services';
+
 import './baAmChart.loader.ts';
 import {BaAmChartThemeService} from './baAmChartTheme.service';
 
@@ -18,6 +20,7 @@ export class BaAmChart {
   @ViewChild('baAmChart') private _selector:ElementRef;
 
   constructor (private _baAmChartThemeService:BaAmChartThemeService) {
+    this._loadChartsLib();
   }
 
   ngOnInit() {
@@ -28,4 +31,12 @@ export class BaAmChart {
     let chart = AmCharts.makeChart(this._selector.nativeElement, this.baAmChartConfiguration);
     this.onChartReady.emit(chart);
   }
+
+  private _loadChartsLib():void {
+    BaThemePreloader.registerLoader(new Promise((resolve, reject) => {
+      AmCharts.ready(function(){
+        resolve('AmCharts ready');
+      });
+    }));
+  }
 }

src/app/theme/services/baImageLoader/index.ts

@@ -0,0 +1 @@
+export * from './baImageLoader.service.ts';

src/app/theme/services/baThemePreloader/baThemePreloader.service.ts

@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class BaThemePreloader {
+
+  private static _loaders:Array<Promise<any>> = [];
+
+  public static registerLoader(method:Promise<any>):void {
+    BaThemePreloader._loaders.push(method);
+  }
+
+  public static clear():void {
+    BaThemePreloader._loaders = [];
+  }
+
+  public static load():Promise<any> {
+    return new Promise((resolve, reject) => {
+      BaThemePreloader._executeAll(resolve);
+    });
+  }
+
+  private static _executeAll(done:Function):void {
+    setTimeout(() => {
+      Promise.all(BaThemePreloader._loaders).then((values) => {
+        done.call(null, values);
+
+      }).catch((error) => {
+        console.error(error);
+      });
+    });
+  }
+}

src/app/theme/services/baThemePreloader/index.ts

@@ -0,0 +1 @@
+export * from './baThemePreloader.service.ts';

src/app/theme/services/index.ts

@@ -0,0 +1,2 @@
+export * from './baImageLoader';
+export * from './baThemePreloader';