From e75b9fb2ed134306b9ed398638cce0723c32b3b7 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Sat, 3 Mar 2018 22:06:51 +0300
Subject: [PATCH] add preloader block to root component instead of text
 'Loading..'

---
 .../root/__preloader/root__preloader.scss     |  6 +++
 .../root/_loading/root_loading.scss           | 39 -------------------
 web/app/components/root/index.js              |  3 +-
 web/app/components/root/root.jsx              |  7 +++-
 web/app/components/root/root.scss             |  1 +
 5 files changed, 13 insertions(+), 43 deletions(-)
 create mode 100644 web/app/components/root/__preloader/root__preloader.scss
 delete mode 100644 web/app/components/root/_loading/root_loading.scss

diff --git a/web/app/components/root/__preloader/root__preloader.scss b/web/app/components/root/__preloader/root__preloader.scss
new file mode 100644
index 00000000..77af553b
--- /dev/null
+++ b/web/app/components/root/__preloader/root__preloader.scss
@@ -0,0 +1,6 @@
+.root__preloader {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
diff --git a/web/app/components/root/_loading/root_loading.scss b/web/app/components/root/_loading/root_loading.scss
deleted file mode 100644
index 4674958e..00000000
--- a/web/app/components/root/_loading/root_loading.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// TODO: add true preloader
-
-.root_loading {
-  position: relative;
-  height: 3em;
-
-  &::after {
-    content: 'Loading..';
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    animation: rootLoading 1s infinite;
-  }
-
-  @keyframes rootLoading {
-    0% {
-      content: 'Loading..';
-    }
-
-    25% {
-      content: 'Loading...';
-    }
-
-    50% {
-      content: 'Loading..';
-    }
-
-    75% {
-      content: 'Loading.';
-    }
-
-    100% {
-      content: 'Loading.';
-    }
-  }
-}
diff --git a/web/app/components/root/index.js b/web/app/components/root/index.js
index 387778d4..4d0661ec 100644
--- a/web/app/components/root/index.js
+++ b/web/app/components/root/index.js
@@ -4,8 +4,7 @@ require('./root.scss');
 
 require('./__auth-panel/root__auth-panel.scss');
 require('./__input/root__input.scss');
+require('./__preloader/root__preloader.scss');
 require('./__pinned-comment/root__pinned-comment.scss');
 require('./__pinned-comments/root__pinned-comments.scss');
 require('./__thread/root__thread.scss');
-
-require('./_loading/root_loading.scss');
diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx
index e7c280e4..cf254690 100644
--- a/web/app/components/root/root.jsx
+++ b/web/app/components/root/root.jsx
@@ -8,6 +8,7 @@ import store from 'common/store';
 import AuthPanel from 'components/auth-panel';
 import Comment from 'components/comment';
 import Input from 'components/input';
+import Preloader from 'components/preloader';
 import Thread from 'components/thread';
 
 export default class Root extends Component {
@@ -91,7 +92,9 @@ export default class Root extends Component {
     if (!loaded) {
       return (
         <div id={NODE_ID}>
-          <div className="root root_loading"/>
+          <div className="root">
+            <Preloader mix="root__preloader"/>
+          </div>
         </div>
       );
     }
@@ -101,7 +104,7 @@ export default class Root extends Component {
 
     return (
       <div id={NODE_ID}>
-        <div className="root root__loading">
+        <div className="root">
           <AuthPanel
             mix="root__auth-panel"
             user={user}
diff --git a/web/app/components/root/root.scss b/web/app/components/root/root.scss
index f5122fac..848f0443 100644
--- a/web/app/components/root/root.scss
+++ b/web/app/components/root/root.scss
@@ -1,3 +1,4 @@
 .root {
+  position: relative;
   font-family: 'PT Sans', Helvetica, Arial, sans-serif;
 }