fix: add placeholder challenge cards when loading

Author: cagdas001

src/shared/components/challenge-listing/Listing/Bucket/index.jsx

@@ -102,7 +102,7 @@ export default function Bucket({
   //   );
   // }
 
-  if (sortedChallenges.length === 0) {
+  if (!loading && sortedChallenges.length === 0) {
     return (
       <div styleName="no-results">
         { `${NO_LIVE_CHALLENGES_CONFIG[bucket]}` }

src/shared/components/challenge-listing/Listing/index.jsx

@@ -13,6 +13,7 @@ import {
 // import { challenge as challengeUtils } from 'topcoder-react-lib';
 import Bucket from './Bucket';
 import ReviewOpportunityBucket from './ReviewOpportunityBucket';
+import CardPlaceholder from '../placeholders/ChallengeCard';
 import './style.scss';
 
 // const Filter = challengeUtils.filter;
@@ -181,19 +182,36 @@ function Listing({
   //     </div>
   //   );
   // }
-  return challenges.length > 0 ? (
-    <div styleName="challengeCardContainer">
-      {preListingMsg}
-      {(auth.user && myChallenges.length > 0) ? getBucket(BUCKETS.MY) : null}
-      {/* {extraBucket ? getBucket(extraBucket) : null} */}
-      {openForRegistrationChallenges.length > 0 && getBucket(BUCKETS.OPEN_FOR_REGISTRATION)}
-      {/* {getBucket(BUCKETS.ONGOING)} */}
-    </div>
-  ) : (
-    <div styleName="challengeCardContainer">
-      <div styleName="no-results">
-        { `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }
+  const loading = loadingMyChallenges
+    || loadingOpenForRegistrationChallenges
+    || loadingOnGoingChallenges;
+  const placeholders = [];
+  if (challenges.length > 0) {
+    return (
+      <div styleName="challengeCardContainer">
+        {preListingMsg}
+        {(auth.user && myChallenges.length > 0) ? getBucket(BUCKETS.MY) : null}
+        {/* {extraBucket ? getBucket(extraBucket) : null} */}
+        {openForRegistrationChallenges.length > 0 && getBucket(BUCKETS.OPEN_FOR_REGISTRATION)}
+        {/* {getBucket(BUCKETS.ONGOING)} */}
       </div>
+    );
+  }
+
+  if (loading) {
+    for (let i = 0; i < 10; i += 1) {
+      placeholders.push(<CardPlaceholder id={i} key={i} />);
+    }
+  }
+  return (
+    <div styleName="challengeCardContainer">
+      {
+        loading
+          ? placeholders
+          : (
+            <div styleName="no-results">{ `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }</div>
+          )
+      }
     </div>
   );
 }