From 8db3c362619f3959e2d6e7a4b6be73ce40e139b5 Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Sun, 8 May 2016 14:26:25 +0300 Subject: [PATCH] Added loader on app initialization. Moved all css/js to the end of body --- package.json | 5 +- src/components/ui/loader/loader.html | 12 +++ src/components/ui/loader/loader.scss | 131 +++++++++++++++++++++++++++ src/first-render.js | 19 ++++ src/index.ejs | 28 ++++++ src/index.html | 18 ---- src/index.js | 6 +- src/index.scss | 2 +- webpack.config.js | 8 +- 9 files changed, 204 insertions(+), 25 deletions(-) create mode 100644 src/components/ui/loader/loader.html create mode 100644 src/components/ui/loader/loader.scss create mode 100644 src/first-render.js create mode 100644 src/index.ejs delete mode 100644 src/index.html 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' } ] },