Renamed /src to /frontend

frontend/components/AtlasPreviewLoading/AtlasPreviewLoading.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './AtlasPreviewLoading.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+import { randomInteger } from 'utils/random';
+
+export default (props) => {
+  return (
+    <div className={ cx(styles.container, styles.animated) }>
+      <div className={ cx(styles.mask, styles.header) } style={{ width: `${randomInteger(65,80)}%` }}>&nbsp;</div>
+      <div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
+      <div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
+      <div className={ cx(styles.mask, styles.bodyText) } style={{ width: `${randomInteger(85,100)}%` }}>&nbsp;</div>
+    </div>
+  );
+};

frontend/components/AtlasPreviewLoading/AtlasPreviewLoading.scss

@@ -0,0 +1,26 @@
+.mask {
+  display: flex;
+  width: 100%;
+  background-color: #ddd;
+}
+
+.header {
+  height: 28px;
+  margin-bottom: 32px;
+}
+
+.bodyText {
+  height: 18px;
+  margin-bottom: 14px;
+}
+
+.animated {
+  width: 100%;
+  animation: PULSATE 1.3s infinite;
+}
+
+@keyframes PULSATE {
+  0%   { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}

frontend/components/AtlasPreviewLoading/index.js

@@ -0,0 +1,2 @@
+import AtlasPreviewLoading from './AtlasPreviewLoading';
+export default AtlasPreviewLoading;