Fix Issue 182 (#199)

* Add loading indicator

* update margin

Co-authored-by: mfikria <mfikria@gmail.com>

Author: fikzzzy

src/components/challenge-listing/ChallengeLoading/index.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "./styles.module.scss";
+
+export default function ChallengeLoading() {
+  return (
+    <div styleName="challenge-loading">
+      <div styleName="track placeholder-template"></div>
+      <div styleName="main">
+        <div styleName="title placeholder-template"></div>
+        <div styleName="info placeholder-template"></div>
+        <div styleName="footer placeholder-template"></div>
+      </div>
+      <div>
+        <div styleName="prize placeholder-template"></div>
+        <div styleName="prize-nominal placeholder-template"></div>
+      </div>
+    </div>
+  )
+}

src/components/challenge-listing/ChallengeLoading/styles.module.scss

@@ -0,0 +1,84 @@
+@import "~styles/mixins";
+
+@keyframes placeholderAnim {
+  0% {
+    background-position: -$base-unit * 94 0;
+  }
+
+  100% {
+    background-position: $base-unit * 94 0;
+  }
+}
+
+.animated-placeholder-template {
+  animation-duration: 1.25s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeholderAnim;
+  animation-timing-function: linear;
+  background: $tc-gray-neutral-dark;
+  background: linear-gradient(to right, $tc-gray-neutral-dark 8%, $tc-gray-10 18%, $tc-gray-neutral-dark 33%);
+  background-size: $base-unit * 256 $base-unit * 20;
+  position: relative;
+}
+
+.placeholder-template {
+  border-radius: $corner-radius;
+
+  @extend .animated-placeholder-template;
+}
+
+.challenge-loading {
+  height: 126px;
+  padding: 16px;
+  margin: 0 24px;
+  display: flex;
+  border-bottom: 1px solid #E9E9E9;
+  border-top: 1px solid #E9E9E9;
+
+  > div {
+    margin-right: 16px;
+  }
+
+  &:nth-child(even) {
+    background: #FBFBFB;
+  }
+  .track {
+    flex: 1 0 46px;
+    width: 46px;
+    height: 44px;
+  }
+
+  .main {
+    flex: 1 1 70%;
+  }
+
+  .title {
+    height: 22px;
+    width: 100px;
+    margin-bottom: 8px;
+  }
+
+  .info {
+    height: 18px;
+    width: 200px;
+    margin-bottom: 16px;
+  }
+
+  .footer {
+    height: 18px;
+    width: 70%;
+  }
+
+  .prize {
+    height: 18px;
+    width: 60px;
+    margin-bottom: 8px;
+    margin-right: 40px;
+  }
+
+  .prize-nominal {
+    height: 42px;
+    width: 40px;
+  }
+}

src/containers/Challenges/Listing/index.jsx

@@ -9,14 +9,16 @@ import ChallengeItem from "./ChallengeItem";
 import TextInput from "../../../components/TextInput";
 import Dropdown from "../../../components/Dropdown";
 import DateRangePicker from "../../../components/DateRangePicker";
+import ChallengeLoading from "../../../components/challenge-listing/ChallengeLoading";
 import * as utils from "../../../utils";
+
 import * as constants from "../../../constants";
 import IconSearch from "../../../assets/icons/search.svg";
-
 import "./styles.scss";
 
 const Listing = ({
   challenges,
+  loadingChallenges,
   search,
   page,
   perPage,
@@ -111,7 +113,9 @@ const Listing = ({
           </div>
         </div>
       </Panel.Header>
-      {challenges.length ? (
+      {loadingChallenges ?
+        _.times(3, () => <ChallengeLoading />) :
+        challenges.length ? (
         <Panel.Body>
           {challenges.map((challenge, index) => (
             <div
@@ -162,6 +166,7 @@ const Listing = ({
 
 Listing.propTypes = {
   challenges: PT.arrayOf(PT.shape()),
+  loadingChallenges: PT.bool,
   search: PT.string,
   page: PT.number,
   perPage: PT.number,

src/containers/Challenges/index.jsx

@@ -4,12 +4,14 @@ import { connect } from "react-redux";
 import Listing from "./Listing";
 import actions from "../../actions";
 // import ChallengeRecommendedError from "./Listing/errors/ChallengeRecommendedError";
+import LoadingIndicator from "../../components/LoadingIndicator";
+import Panel from "../../components/Panel";
 import * as constants from "../../constants";
 // import IconListView from "../../assets/icons/list-view.svg";
 // import IconCardView from "../../assets/icons/card-view.svg";
 import { Banner } from "@topcoder/micro-frontends-earn-app";
-import * as utils from "../../utils";
 
+import * as utils from "../../utils";
 import "./styles.scss";
 
 const Challenges = ({
@@ -29,6 +31,7 @@ const Challenges = ({
   initialized,
   updateQuery,
   tags,
+  loadingChallenges,
 }) => {
   const [isLoggedIn, setIsLoggedIn] = useState(null);
 
@@ -85,11 +88,12 @@ const Challenges = ({
           </button>
         </span> */}
       </h1>
-      {initialized && (
+      {initialized ? (
         <>
           {/*noRecommendedChallenges && <ChallengeRecommendedError />*/}
           <Listing
             challenges={challenges}
+            loadingChallenges={loadingChallenges}
             search={search}
             page={page}
             perPage={perPage}
@@ -107,6 +111,12 @@ const Challenges = ({
             isLoggedIn={isLoggedIn}
           />
         </>
+      ) : (
+        <Panel>
+          <Panel.Body>
+            <LoadingIndicator />
+          </Panel.Body>
+        </Panel>
       )}
     </div>
   );
@@ -128,6 +138,7 @@ Challenges.propTypes = {
   initialized: PT.bool,
   updateQuery: PT.func,
   tags: PT.arrayOf(PT.string),
+  loadingChallenges: PT.bool,
 };
 
 const mapStateToProps = (state) => ({
@@ -146,6 +157,7 @@ const mapStateToProps = (state) => ({
   recommendedChallenges: state.challenges.recommendedChallenges,
   initialized: state.challenges.initialized,
   tags: state.filter.challenge.tags,
+  loadingChallenges: state.challenges.loadingChallenges
 });
 
 const mapDispatchToProps = {

src/reducers/challenges.js

@@ -1,7 +1,7 @@
 import { handleActions } from "redux-actions";
 
 const defaultState = {
-  loadingChallenges: false,
+  loadingChallenges: true,
   loadingChallengesError: null,
   challenges: [],
   challengesMeta: {},
@@ -14,7 +14,7 @@ const defaultState = {
 };
 
 function onGetChallengesInit(state) {
-  return { ...state, loadingChallenges: true, loadingChallengesError: null };
+  return { ...state, challenges: [], loadingChallenges: true, loadingChallengesError: null };
 }
 
 function onGetChallengesDone(state, { error, payload }) {
@@ -57,7 +57,7 @@ function onGetChallengesFailure(state, { payload }) {
 
 export default handleActions(
   {
-    GET_CHALLENGE_INIT: onGetChallengesInit,
+    GET_CHALLENGES_INIT: onGetChallengesInit,
     GET_CHALLENGES_DONE: onGetChallengesDone,
   },
   defaultState