Added loader on app initialization. Moved all css/js to the end of body

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": "*",

src/components/ui/loader/loader.html

@@ -0,0 +1,12 @@
+<div id="loader" class="loader-overlay">
+    <div class="loader">
+        <div class="loader__cube loader__cube--1"></div>
+        <div class="loader__cube loader__cube--2"></div>
+        <div class="loader__cube loader__cube--3"></div>
+        <div class="loader__cube loader__cube--4"></div>
+        <div class="loader__cube loader__cube--5"></div>
+        <div class="loader__cube loader__cube--6"></div>
+        <div class="loader__cube loader__cube--7"></div>
+        <div class="loader__cube loader__cube--8"></div>
+    </div>
+</div>

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;}
+}

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')}
+
+    <script>
+        (function(l) {
+            l.offsetHeight;
+            l.className += ' is-active';
+        }(document.getElementById('loader')));
+    </script>
+
+    <style>
+        ${require('!!css!postcss!sass!index.scss')[0][1]}
+        ${require('!!css!postcss!sass!components/ui/loader/loader.scss')[0][1]}
+    </style>
+`;

src/index.ejs

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Ely.by - Account</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+    <% if (htmlWebpackPlugin.files.favicon) { %>
+        <link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon %>">
+    <% } %>
+</head>
+<body>
+
+<div id="app" class="app"></div>
+
+<%= require('first-render').default %>
+
+<link href="//fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic" rel="stylesheet" type="text/css">
+<link href="//fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic" rel="stylesheet" type="text/css">
+<% for (var css in htmlWebpackPlugin.files.css) { %>
+    <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+<% } %>
+<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+    <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
+<% } %>
+</body>
+</html>

src/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Ely.by - Account</title>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
-
-    <link href="//fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic" rel="stylesheet" type="text/css">
-    <link href="//fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic" rel="stylesheet" type="text/css">
-</head>
-<body>
-
-<div id="app" class="app"></div>
-
-</body>
-</html>

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(
     </IntlProvider>,
     document.getElementById('app')
 );
+
+setTimeout(() => {
+    document.getElementById('loader').classList.remove('is-active');
+}, 50);

src/index.scss

@@ -3,7 +3,7 @@
 
 html,
 body,
-:global(.app) {
+.app {
     height: 100%;
     margin: 0;
     padding: 0;

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'
             }
         ]
     },