ci:add loading screen

Author: dengjun

package-lock.json

@@ -81,6 +81,7 @@
     "react-date-range": "^1.1.3",
     "react-dom": "^16.12.0",
     "react-dropzone": "^11.3.2",
+    "react-loading": "^2.0.3",
     "react-redux": "^7.2.3",
     "react-responsive-modal": "^6.1.0",
     "react-select": "^1.3.0",

package.json

@@ -1,23 +1,40 @@
-import React, { useState } from "react";
+import React from "react";
+import ReactLoading from "react-loading";
 import PT from "prop-types";
-
 import "./styles.scss";
 
-const Loading = () => {
-  const header =
-    "Welcome to our BETA work listings site - Tell us what you think!";
-
+const Loading = (props) => {
+  const { color, type, height, width } = props;
   return (
     <div styleName="loading-wrapper">
       <div styleName="loading-inner">
-        <div>Loading spinner</div>
+        <div>
+          <ReactLoading
+            type={type}
+            color={color}
+            height={height}
+            width={width}
+          />
+        </div>
         <h4>LOADING</h4>
         <span>We are processing your gigs data</span>
       </div>
     </div>
   );
 };
 
-Loading.propTypes = {};
+Loading.defaultProps = {
+  color: "#0ab88a",
+  type: "spin",
+  width: 35,
+  height: 35,
+};
+
+Loading.propTypes = {
+  color: PT.string,
+  type: PT.string,
+  width: PT.number,
+  height: PT.number,
+};
 
 export default Loading;

src/components/Loading/index.jsx

@@ -1,5 +1,6 @@
 @import "styles/variables";
 @import "styles/mixins";
+@import "styles/animations";
 
 .loading-wrapper {
   width: 100%;
@@ -26,5 +27,15 @@
             line-height: 26px;
             margin-top: 10px;
         }
+        svg {
+            path:first-child {
+                fill: $tc-gray4;
+                opacity: 1;
+            }
+            path:last-child {
+                animation: rotate 0.8s linear infinite; 
+                transform-origin: 50% 50%;
+            }
+        }
     }
 }

src/components/Loading/styles.scss

@@ -15,7 +15,7 @@ const defaultState = {
   updatingProfile: false,
   updatingProfileError: null,
   updatingProfileSucess: null,
-  checkingGigs: true,
+  checkingGigs: false,
 };
 
 function onGetMyGigsInit(state) {

src/reducers/myGigs.js

@@ -0,0 +1,4 @@
+@keyframes rotate {
+    from { transform: rotate(0deg);}
+    to { transform: rotate(360deg); }
+}