diff --git a/config/webpack.common.js b/config/webpack.common.js
index be6fe415..0d2c3fe3 100644
--- a/config/webpack.common.js
+++ b/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'])
),
diff --git a/package.json b/package.json
index 7e4d566a..b850948e 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index bd1e623a..b441482f 100644
--- a/src/app/app.component.ts
+++ b/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);
+ }
}
diff --git a/src/app/app.loader.ts b/src/app/app.loader.ts
index 5a8c69fc..6e306cce 100644
--- a/src/app/app.loader.ts
+++ b/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');
diff --git a/src/app/theme/components/baCard/baCardBlurHelper.service.ts b/src/app/theme/components/baCard/baCardBlurHelper.service.ts
index 915cd69b..ddb431da 100644
--- a/src/app/theme/components/baCard/baCardBlurHelper.service.ts
+++ b/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;
diff --git a/src/app/theme/index.ts b/src/app/theme/index.ts
index df82c5e2..c2d456a6 100644
--- a/src/app/theme/index.ts
+++ b/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'
diff --git a/src/app/theme/initial.scss b/src/app/theme/initial.scss
new file mode 100644
index 00000000..0d3b970f
--- /dev/null
+++ b/src/app/theme/initial.scss
@@ -0,0 +1,3 @@
+@import 'sass/conf/conf';
+@import 'sass/preloader';
+@import 'sass/ionicons';
diff --git a/src/app/theme/theme.scss b/src/app/theme/theme.scss
index be0f39fc..43f7aeee 100644
--- a/src/app/theme/theme.scss
+++ b/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";
diff --git a/src/app/theme/theme.spinner.ts b/src/app/theme/theme.spinner.ts
new file mode 100644
index 00000000..6be15262
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/index.html b/src/index.html
index c9afc3c2..eaae679e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,16 +20,19 @@
-
+
<% if (webpackConfig.metadata.ENV === 'development') { %>
-
-
+
+
<% } %>
-
+