add loading component

Author: dengjun

src/components/Loading/index.jsx

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

src/components/Loading/styles.scss

@@ -0,0 +1,30 @@
+@import "styles/variables";
+@import "styles/mixins";
+
+.loading-wrapper {
+  width: 100%;
+  border-radius: $border-radius-lg;
+  background-color: rgba(42,42,42, 0.07);
+  padding: 232px 0px;
+    .loading-inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        & > h4 {
+            margin-top: 10px;
+            font-size: 34px;
+            color: $tc-turquoise-dark1;
+            line-height: 38px;
+            letter-spacing: 0;
+            text-align: center;
+        }
+        & > span {
+            font-size: 16px;
+            color: $tc-gray1;
+            text-align: center;
+            line-height: 26px;
+            margin-top: 10px;
+        }
+    }
+}

src/containers/MyGigs/index.jsx

@@ -4,6 +4,7 @@ import PT from "prop-types";
 import { connect } from "react-redux";
 import Modal from "../../components/Modal";
 import Button from "../../components/Button";
+import Loading from "../../components/Loading";
 import JobListing from "./JobListing";
 import actions from "../../actions";
 import { EMPTY_GIGS_TEXT } from "../../constants";
@@ -87,17 +88,18 @@ const MyGigs = ({
             UPDATE GIG WORK PROFILE
           </Button>
         </h1>
-        {myGigs && myGigs.length == 0 && (
+        {!checkingGigs && myGigs && myGigs.length == 0 && (
           <h3 styleName="empty-label">{EMPTY_GIGS_TEXT}</h3>
         )}
-        {myGigs && myGigs.length > 0 && (
+        {!checkingGigs && myGigs && myGigs.length > 0 && (
           <JobListing
             jobs={myGigs}
             loadMore={loadMore}
             total={total}
             numLoaded={numLoaded}
           />
         )}
+        {checkingGigs && <Loading />}
       </div>
       <Modal open={openUpdateProfile}>
         <UpdateGigProfile

src/reducers/myGigs.js

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