diff --git a/package.json b/package.json
index 2a60968..122e87a 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
"up": "npm install",
"test": "karma start ./karma.conf.js",
"lint": "eslint ./src",
- "build": "webpack --progress --colors -p"
+ "build": "rm -rf dist/ && webpack --progress --colors -p"
},
"dependencies": {
"babel-polyfill": "^6.3.14",
@@ -54,7 +54,8 @@
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^0.9.1",
"file-loader": "^0.8.5",
- "html-webpack-plugin": "^1.7.0",
+ "html-loader": "^0.4.3",
+ "html-webpack-plugin": "^2.0.0",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.4",
"karma": "*",
diff --git a/src/components/ui/loader/loader.html b/src/components/ui/loader/loader.html
new file mode 100644
index 0000000..3728412
--- /dev/null
+++ b/src/components/ui/loader/loader.html
@@ -0,0 +1,12 @@
+
diff --git a/src/components/ui/loader/loader.scss b/src/components/ui/loader/loader.scss
new file mode 100644
index 0000000..65cf05b
--- /dev/null
+++ b/src/components/ui/loader/loader.scss
@@ -0,0 +1,131 @@
+.loader-overlay {
+ background: rgba(255, 255, 255, 0.3);
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+
+ visibility: hidden;
+ opacity: 0;
+
+ transition: 0.4s ease;
+
+ &.is-active {
+ opacity: 1;
+ visibility: visible;
+ transition: 0.05s ease;
+ }
+}
+
+.loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -75px;
+ margin-left: -75px;
+ width: 153px;
+ height: 153px;
+
+ &__cube {
+ position: absolute;
+ margin: -1px;
+ padding: 0;
+ width: 50px;
+ height: 50px;
+ background: rgba(35, 35, 35, 0.6);
+ display: inline-block;
+ animation-iteration-count: infinite;
+ animation-duration: .5s;
+ animation-timing-function: linear;
+
+ &--1 {
+ margin: 0 0 0 0;
+ animation-name: cube1;
+ }
+
+ &--2 {
+ margin: 0 0 0 051px;
+ animation-name: cube2;
+ }
+
+ &--3 {
+ margin: 0 0 0 102px;
+ animation-name: cube3;
+ }
+
+ &--4 {
+ margin: 51px 0 0 0;
+ animation-name: cube4;
+ }
+
+ &--5 {
+ margin: 051px 0 0 051px;
+ }
+
+ &--6 {
+ margin: 51px 0 0 102px;
+ animation-name: cube6;
+ }
+
+ &--7 {
+ margin: 102px 0 0 0;
+ animation-name: cube7;
+ }
+
+ &--8 {
+ margin: 102px 0 0 051px;
+ animation-name: cube8;
+ }
+ }
+}
+
+@keyframes cube1 {
+ 25%{ margin: 0 0 0 0;}
+ 50%{ margin: 0 0 0 51px;}
+ 75%{ margin: 0 0 0 51px;}
+ 100%{margin: 0 0 0 51px;}
+}
+
+@keyframes cube2 {
+ 25%{ margin: 0 0 0 51px;}
+ 50%{ margin: 0 0 0 102px;}
+ 75%{ margin: 0 0 0 102px;}
+ 100%{margin: 0 0 0 102px;}
+}
+
+@keyframes cube3 {
+ 25%{ margin: 51px 0 0 102px;}
+ 50%{ margin: 51px 0 0 102px;}
+ 75%{ margin: 51px 0 0 102px;}
+ 100%{margin: 51px 0 0 102px;}
+}
+
+@keyframes cube4 {
+ 25%{ margin: 51px 0 0 0;}
+ 50%{ margin: 51px 0 0 0;}
+ 75%{ margin: 0 0 0 0;}
+ 100%{margin: 0 0 0 0;}
+}
+
+@keyframes cube6 {
+ 25%{ margin: 102px 0 0 102px;}
+ 50%{ margin: 102px 0 0 102px;}
+ 75%{ margin: 102px 0 0 102px;}
+ 100%{margin: 102px 0 0 51px;}
+}
+
+@keyframes cube7 {
+ 25%{ margin: 102px 0 0 0;}
+ 50%{ margin: 102px 0 0 0;}
+ 75%{ margin: 51px 0 0 0;}
+ 100%{margin: 51px 0 0 0;}
+}
+
+@keyframes cube8 {
+ 25%{ margin: 102px 0 0 51px;}
+ 50%{ margin: 102px 0 0 51px;}
+ 75%{ margin: 102px 0 0 51px;}
+ 100%{margin: 102px 0 0 0;}
+}
diff --git a/src/first-render.js b/src/first-render.js
new file mode 100644
index 0000000..e67033f
--- /dev/null
+++ b/src/first-render.js
@@ -0,0 +1,19 @@
+/**
+ * Returns the content to be displayed on first render
+ */
+
+export default `
+ ${require('components/ui/loader/loader.html')}
+
+
+
+
+`;
diff --git a/src/index.ejs b/src/index.ejs
new file mode 100644
index 0000000..953de09
--- /dev/null
+++ b/src/index.ejs
@@ -0,0 +1,28 @@
+
+
+
+
+ Ely.by - Account
+
+
+
+ <% if (htmlWebpackPlugin.files.favicon) { %>
+
+ <% } %>
+
+
+
+
+
+<%= require('first-render').default %>
+
+
+
+<% for (var css in htmlWebpackPlugin.files.css) { %>
+
+<% } %>
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+
+<% } %>
+
+
diff --git a/src/index.html b/src/index.html
deleted file mode 100644
index 01b7faf..0000000
--- a/src/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
- Ely.by - Account
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/index.js b/src/index.js
index 253c677..78a18b6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,8 +20,6 @@ import { IntlProvider } from 'react-intl';
import reducers from 'reducers';
import routesFactory from 'routes';
-import 'index.scss';
-
const reducer = combineReducers({
...reducers,
routing: routeReducer
@@ -50,3 +48,7 @@ ReactDOM.render(
,
document.getElementById('app')
);
+
+setTimeout(() => {
+ document.getElementById('loader').classList.remove('is-active');
+}, 50);
diff --git a/src/index.scss b/src/index.scss
index cc10f8b..0ca6744 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -3,7 +3,7 @@
html,
body,
-:global(.app) {
+.app {
height: 100%;
margin: 0;
padding: 0;
diff --git a/webpack.config.js b/webpack.config.js
index 39699dc..2406c45 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -118,11 +118,11 @@ var webpackConfig = {
__PROD__: isProduction
}),
new HtmlWebpackPlugin({
- template: 'src/index.html',
+ template: 'src/index.ejs',
favicon: 'src/favicon.ico',
hash: isProduction,
filename: 'index.html',
- inject: 'body',
+ inject: false,
minify: {
collapseWhitespace: isProduction
}
@@ -157,6 +157,10 @@ var webpackConfig = {
{
test: /\.json$/,
loader: 'json'
+ },
+ {
+ test: /\.html$/,
+ loader: 'html'
}
]
},