Refactor preloader

* make it simple (use only one DOM element for preloader)
* remove useless test (it tests nothing)
* unify preloader import/export

frontend/app/components/preloader/index.ts

@@ -1,3 +1,3 @@
-export { default } from './preloader';
+export { Preloader } from './preloader';
 
 // all styles were moved to iframe.html

frontend/app/components/preloader/preloader.test.tsx

@@ -1,12 +0,0 @@
-/** @jsx createElement */
-import { createElement } from 'preact';
-import { mount } from 'enzyme';
-import Preloader from './preloader';
-
-describe(`<Preloader />`, () => {
-  it('should render Preloader', () => {
-    const element = mount(<Preloader mix="root__preloader" />);
-
-    expect(element.childAt(0).hasClass('preloader root__preloader')).toEqual(true);
-  });
-});

frontend/app/components/preloader/preloader.tsx

@@ -1,17 +1,9 @@
 /** @jsx createElement */
-import { createElement, JSX } from 'preact';
+import { createElement, FunctionComponent } from 'preact';
 import b, { Mix } from 'bem-react-helper';
 
-type Props = JSX.HTMLAttributes & {
+interface Props {
   mix?: Mix;
-};
+}
 
-const Preloader = (props: Props) => (
-  <div className={b('preloader', props)}>
-    <div className="preloader__bounce" />
-    <div className="preloader__bounce" />
-    <div className="preloader__bounce" />
-  </div>
-);
-
-export default Preloader;
+export const Preloader: FunctionComponent<Props> = ({ mix }) => <div className={b('preloader', { mix })} />;

frontend/app/components/root/root.tsx

@@ -36,7 +36,7 @@ import { AuthPanel } from '@app/components/auth-panel';
 import Settings from '@app/components/settings';
 import { ConnectedComment as Comment } from '@app/components/comment/connected-comment';
 import { CommentForm } from '@app/components/comment-form';
-import Preloader from '@app/components/preloader';
+import { Preloader } from '@app/components/preloader';
 import { Thread } from '@app/components/thread';
 import { Button } from '@app/components/button';
 import { uploadImage, getPreview } from '@app/common/api';

frontend/app/components/user-info/__preloader/user-info__preloader.scss

@@ -1,3 +1,4 @@
 .user-info__preloader {
   margin: 0 auto 18px;
+  color: #888;
 }

frontend/app/components/user-info/last-comments-list.tsx

@@ -3,8 +3,8 @@ import { createElement } from 'preact';
 
 import { Comment as CommentType } from '@app/common/types';
 
-import { Comment } from '../comment';
-import Preloader from '../preloader';
+import { Comment } from '@app/components/comment';
+import { Preloader } from '@app/components/preloader';
 
 const LastCommentsList = ({ comments, isLoading }: { comments: CommentType[]; isLoading: boolean }) => {
   if (isLoading) {

frontend/deleteme.html

@@ -12,60 +12,57 @@
         -moz-osx-font-smoothing: grayscale;
       }
 
-    .preloader {
-      width: 60px;
-      text-align: center;
-      font-size: 0;
+      @keyframes bouncing {
+        0%,
+        80%,
+        100% {
+          box-shadow: 0 10px 0 -8px;
         }
-
-    .preloader_view_iframe {
-      margin: 0 auto;
+        40% {
+          box-shadow: 0 10px 0 0;
         }
+      }
 
-    .preloader__bounce {
-      display: inline-block;
+      .preloader,
+      .preloader:before,
+      .preloader:after {
+        border-radius: 50%;
         width: 10px;
         height: 10px;
-      margin-right: 3px;
-      background-color: #333;
-      border-radius: 100%;
-      animation: iframePreloaderBounce 1.4s infinite ease-in-out both;
+        animation-fill-mode: both;
+        animation: bouncing 1.8s infinite ease-in-out;
       }
 
-    .preloader__bounce:first-child {
-      animation-delay: -.32s;
-    }
-
-    .preloader__bounce:nth-child(2) {
-      animation-delay: -.16s;
+      .preloader {
+        color: #fff;
+        position: relative;
+        transform: translateZ(0);
+        animation-delay: -0.16s;
       }
 
-    .preloader__bounce:last-child {
-      margin-right: 0;
+      .preloader:before,
+      .preloader:after {
+        content: '';
+        position: absolute;
+        top: 0;
+      }
+      .preloader:before {
+        transform: translateX(-15px) translateZ(0);
+        animation-delay: -0.32s;
+      }
+      .preloader:after {
+        transform: translateX(15px) translateZ(0);
       }
 
-    @keyframes iframePreloaderBounce {
-      0% {
-        transform: scale(0);
-      }
-
-      40% {
-        transform: scale(1);
-      }
-
-      80%, 100% {
-        transform: scale(0);
-      }
+      .preloader_view_iframe {
+        margin: 0 auto;
+        color: #888;
       }
     </style>
   </head>
   <body>
     <div id="remark42">
-    <div class="preloader preloader_view_iframe">
-      <div class="preloader__bounce"></div>
-      <div class="preloader__bounce"></div>
-      <div class="preloader__bounce"></div>
-    </div>
+      <div class="preloader preloader_view_iframe"></div>
     </div>
     <script>
       var remark_config = {

frontend/iframe.html

@@ -20,50 +20,52 @@
         -moz-osx-font-smoothing: grayscale;
       }
 
-    .preloader {
-      width: 60px;
-      text-align: center;
-      font-size: 0;
+      @keyframes bouncing {
+        0%,
+        80%,
+        100% {
+          box-shadow: 0 10px 0 -10px;
         }
-
-    .preloader_view_iframe {
-      margin: 0 auto;
+        40% {
+          box-shadow: 0 10px 0 0;
         }
+      }
 
-    .preloader__bounce {
-      display: inline-block;
+      .preloader,
+      .preloader:before,
+      .preloader:after {
+        border-radius: 50%;
         width: 10px;
         height: 10px;
-      margin-right: 3px;
-      background-color: #888;
-      border-radius: 100%;
-      animation: iframePreloaderBounce 1.4s infinite ease-in-out both;
+        text-align: left;
+        animation-fill-mode: both;
+        animation: bouncing 1.8s infinite ease-in-out;
       }
 
-    .preloader__bounce:first-child {
-      animation-delay: -.32s;
+      .preloader {
+        color: #fff;
+        position: relative;
+        transform: translate3d(0, -10px, 0);
+        animation-delay: -0.16s;
       }
 
-    .preloader__bounce:nth-child(2) {
-      animation-delay: -.16s;
-    }
-
-    .preloader__bounce:last-child {
-      margin-right: 0;
+      .preloader:before,
+      .preloader:after {
+        content: '';
+        position: absolute;
+        top: 0;
+      }
+      .preloader:before {
+        transform: translate3d(-15px, 0, 0);
+        animation-delay: -0.32s;
+      }
+      .preloader:after {
+        transform: translate3d(15px, 0, 0);
       }
 
-    @keyframes iframePreloaderBounce {
-      0% {
-        transform: scale(0);
-      }
-
-      40% {
-        transform: scale(1);
-      }
-
-      80%, 100% {
-        transform: scale(0);
-      }
+      .preloader_view_iframe {
+        margin: 0 auto;
+        color: #888;
       }
 
       :focus:not(.focus-visible):not(.button) {
@@ -73,11 +75,7 @@
   </head>
   <body>
     <div id="remark42">
-    <div class="preloader preloader_view_iframe">
-      <div class="preloader__bounce"></div>
-      <div class="preloader__bounce"></div>
-      <div class="preloader__bounce"></div>
-    </div>
+      <div class="preloader preloader_view_iframe"></div>
     </div>
     <script>
       /* REMOVE-START */