theme spinner

config/webpack.common.js

@@ -4,6 +4,7 @@ const helpers = require('./helpers');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const METADATA = {
   title: 'Blur Admin on Angular2',
@@ -86,8 +87,7 @@ module.exports = {
         loader: 'source-map-loader',
         exclude: [
           // these packages have problems with their sourcemaps
-          helpers.root('node_modules/rxjs'),
-          helpers.root('node_modules/@angular2-material')
+          helpers.root('node_modules/rxjs')
         ]
       }
 
@@ -132,6 +132,11 @@ module.exports = {
         loaders: ['raw-loader', 'sass-loader']
       },
 
+      {
+        test: /initial\.scss$/,
+        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
+      },
+
       {
         test: /\.woff(2)?(\?v=.+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"
       },
@@ -166,6 +171,10 @@ module.exports = {
    * See: http://webpack.github.io/docs/configuration.html#plugins
    */
   plugins: [
+    new ExtractTextPlugin('initial.css',  {
+      allChunks: true
+    }),
+
     new webpack.ResolverPlugin(
       new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
     ),

package.json

@@ -22,6 +22,7 @@
     "chartist": "^0.9.7",
     "core-js": "^2.2.2",
     "easy-pie-chart": "^2.1.7",
+    "extract-text-webpack-plugin": "^1.0.1",
     "font-awesome": "^4.6.1",
     "font-awesome-sass-loader": "^1.0.1",
     "google-maps": "^3.2.1",

src/app/app.component.ts

@@ -1,11 +1,12 @@
+import './app.loader.ts';
+
 import {Component, ViewEncapsulation} from '@angular/core';
 import {RouteConfig} from '@angular/router-deprecated';
 
 import {Pages} from './pages';
 import {AppState} from './app.state';
-import {BaThemeConfigProvider, BaThemeConfig} from './theme';
+import {BaThemeConfigProvider, BaThemeConfig, BaThemeSpinner} from './theme';
 import {BaThemeRun} from './theme/directives';
-import './app.loader.ts';
 
 /*
  * App Component
@@ -15,7 +16,7 @@ import './app.loader.ts';
   selector: 'app',
   pipes: [],
   directives: [BaThemeRun],
-  providers: [BaThemeConfigProvider, BaThemeConfig],
+  providers: [BaThemeConfigProvider, BaThemeConfig, BaThemeSpinner],
   encapsulation: ViewEncapsulation.None,
   styles: [require('normalize.css'), require('./app.scss')],
   template: `
@@ -36,10 +37,14 @@ export class App {
 
   isMenuCollapsed:boolean = false;
 
-  constructor(private _state:AppState, private _baThemeConfig:BaThemeConfig) {
+  constructor(private _state:AppState, private _baThemeConfig:BaThemeConfig, private _baSpinner:BaThemeSpinner) {
 
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
       this.isMenuCollapsed = isCollapsed;
     });
   }
+
+  ngAfterViewInit() {
+    this._baSpinner.hide(200);
+  }
 }

src/app/app.loader.ts

@@ -1 +1,2 @@
-require('!style!css!sass!./theme/sass/_ionicons.scss');
+// this css loaded separately as a standalone file to speed up the initial styles loading
+require('./theme/initial.scss');

src/app/theme/components/baCard/baCardBlurHelper.service.ts

@@ -1,7 +1,8 @@
 import {Injectable} from '@angular/core'
-import {BgMetrics} from './bgMetrics';
 import {Subject} from 'rxjs/Subject';
 
+import {BgMetrics} from './bgMetrics';
+
 @Injectable()
 export class BaCardBlurHelper {
   private image:HTMLImageElement;

src/app/theme/index.ts

@@ -1,3 +1,4 @@
+export * from './theme.spinner'
 export * from './theme.constants'
 export * from './theme.configProvider'
 export * from './theme.config'

src/app/theme/initial.scss

@@ -0,0 +1,3 @@
+@import 'sass/conf/conf';
+@import 'sass/preloader';
+@import 'sass/ionicons';

src/app/theme/theme.scss

@@ -5,7 +5,6 @@
 @import "sass/buttons";
 @import "sass/icons";
 @import "sass/layout";
-@import "sass/preloader";
 @import "sass/socicon";
 @import "sass/table";
 @import "sass/form";

src/app/theme/theme.spinner.ts

@@ -0,0 +1,22 @@
+import {Injectable} from '@angular/core';
+
+@Injectable()
+export class BaThemeSpinner {
+
+  private _selector:string = 'preloader';
+  private _element:HTMLElement;
+
+  constructor() {
+    this._element = document.getElementById(this._selector);
+  }
+
+  public show():void {
+    this._element.style['display'] = 'block';
+  }
+
+  public hide(delay:number = 0):void {
+    setTimeout(() => {
+      this._element.style['display'] = 'none';
+    }, delay);
+  }
+}

src/index.html

@@ -20,16 +20,19 @@
 </head>
 
 <body>
-
   <app>
   </app>
 
+  <div id="preloader">
+    <div></div>
+  </div>
 
   <% if (webpackConfig.metadata.ENV === 'development') { %>
-    <!-- Webpack Dev Server reload -->
-    <script src="/webpack-dev-server.js"></script>
+  <!-- Webpack Dev Server reload -->
+  <script src="/webpack-dev-server.js"></script>
   <% } %>
 
-  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic'
+    rel='stylesheet' type='text/css'>
 </body>
 </html>