enhance styles of preloader

web/app/components/preloader/__bounce/preloader__bounce.scss

@@ -1,35 +0,0 @@
-.preloader__bounce {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  margin-right: 3px;
-  background-color: #333;
-  border-radius: 100%;
-  animation: preloaderBounce 1.4s infinite ease-in-out both;
-
-  &:first-child {
-    animation-delay: -.32s;
-  }
-
-  &:nth-child(2) {
-    animation-delay: -.16s;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  @keyframes preloaderBounce {
-    0% {
-      transform: scale(0);
-    }
-
-    40% {
-      transform: scale(1);
-    }
-
-    80%, 100% {
-      transform: scale(0);
-    }
-  }
-}

web/app/components/preloader/index.js

@@ -1,5 +1,3 @@
 export { default } from './preloader';
 
-require('./preloader.scss');
+// all styles were moved to iframe.html
-
-require('./__bounce/preloader__bounce.scss');

web/app/components/preloader/preloader.scss

@@ -1,5 +0,0 @@
-.preloader {
-  width: 60px;
-  text-align: center;
-  font-size: 0;
-}

web/app/components/root/root.jsx

@@ -51,25 +51,27 @@ export default class Root extends Component {
 
   componentDidMount() {
     const { sort } = this.state;
-    api.getConfig().then(config => {
-          store.set('config', config);
-          this.setState({ config });
-    });
-    Promise.all([
-        api.getUser()
-            .then(data => store.set('user', data))
-            .catch(() => store.set('user', {})),
-        api.find({ sort, url })
-            .then(({ comments = [] } = {}) => store.set('comments', comments))
-            .catch(() => store.set('comments', [])),
-    ]).finally(() => {
-        this.setState({
-            isLoaded: true,
-            user: store.get('user'),
-        });
 
-        setTimeout(this.checkUrlHash);
+    api.getConfig().then(config => {
-    })
+      store.set('config', config);
+      this.setState({ config });
+    });
+
+    Promise.all([
+      api.getUser()
+        .then(data => store.set('user', data))
+        .catch(() => store.set('user', {})),
+      api.find({ sort, url })
+        .then(({ comments = [] } = {}) => store.set('comments', comments))
+        .catch(() => store.set('comments', [])),
+    ]).finally(() => {
+      this.setState({
+        isLoaded: true,
+        user: store.get('user'),
+      });
+
+      setTimeout(this.checkUrlHash);
+    });
   }
 
   checkUrlHash() {

web/iframe.html

@@ -13,41 +13,61 @@
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
-    .iframe_preloader {
+
-        position: absolute;
+    .preloader {
-        left: 0;
+      width: 60px;
-        right: 0;
+      text-align: center;
-        margin: 0 auto;
+      font-size: 0;
-        width: 60px;
-        text-align: center;
-        font-size: 0;
     }
-    .iframe_preloader__bounce {
+
-        display: inline-block;
+    .preloader_view_iframe {
-        width: 10px;
+      margin: 0 auto;
-        height: 10px;
-        margin-right: 3px;
-        background-color: #333;
-        border-radius: 100%;
-        animation: iframePreloaderBounce 1.4s infinite ease-in-out both;
     }
-    .iframe_preloader__bounce:first-child {animation-delay: -.32s;}
+
-    .iframe_preloader__bounce:nth-child(2) {animation-delay: -.16s;}
+    .preloader__bounce {
-    .iframe_preloader__bounce:last-child {margin-right: 0;}
+      display: inline-block;
-     @keyframes iframePreloaderBounce {
+      width: 10px;
-        0% {transform: scale(0);}
+      height: 10px;
-        40% {transform: scale(1);}
+      margin-right: 3px;
-        80%, 100% {transform: scale(0);}
+      background-color: #333;
+      border-radius: 100%;
+      animation: iframePreloaderBounce 1.4s infinite ease-in-out both;
+    }
+
+    .preloader__bounce:first-child {
+      animation-delay: -.32s;
+    }
+
+    .preloader__bounce:nth-child(2) {
+      animation-delay: -.16s;
+    }
+
+    .preloader__bounce:last-child {
+      margin-right: 0;
+    }
+
+    @keyframes iframePreloaderBounce {
+      0% {
+        transform: scale(0);
+      }
+
+      40% {
+        transform: scale(1);
+      }
+
+      80%, 100% {
+        transform: scale(0);
+      }
     }
   </style>
 </head>
 <body>
   <div id="remark42">
-      <div class="iframe_preloader">
+    <div class="preloader preloader_view_iframe">
-          <div class="iframe_preloader__bounce"></div>
+      <div class="preloader__bounce"></div>
-          <div class="iframe_preloader__bounce"></div>
+      <div class="preloader__bounce"></div>
-          <div class="iframe_preloader__bounce"></div>
+      <div class="preloader__bounce"></div>
-      </div>
+    </div>
   </div>
   <script>
     var lastHeight = 0;