Add Loading

Author: 3846masa

src/components/common/Loading/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+
+import styles from './styles.css';
+import Layout from '~/components/common/Layout';
+
+const Loading = ({ loading }) =>
+  !loading ? null : (
+    <Layout>
+      <div className={styles.base}>
+        <FontAwesomeIcon icon={faSpinner} size="3x" pulse />
+      </div>
+    </Layout>
+  );
+
+export default Loading;

src/components/common/Loading/styles.css

@@ -0,0 +1,8 @@
+.base {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.75);
+}

src/components/preview/PreviewPage/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Layout from '~/components/common/Layout';
+import Loading from '~/components/common/Loading';
 import PreviewView from '~/components/preview/PreviewView';
 import PreviewController from '~/components/preview/PreviewControlll';
 import * as filters from '~/filters';
@@ -102,6 +103,7 @@ class PreviewPage extends React.Component {
           onSave={this.onSave}
           onClickFilterButton={this.onClickFilterButton}
         />
+        <Loading loading={loading} />
       </Layout>
     );
   }