fix: no challenges found

Author: dedywahyudi

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

@@ -17,6 +17,7 @@ import CardPlaceholder from '../placeholders/ChallengeCard';
 import './style.scss';
 
 // const Filter = challengeUtils.filter;
+const LOADING_MESSAGE = 'Loading Challenges';
 
 function Listing({
   activeBucket,
@@ -258,7 +259,14 @@ function Listing({
         loading
           ? placeholders
           : (!filterState.recommended || activeBucket !== 'openForRegistration') && (
-            <div styleName="no-results">{ `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }</div>
+            <div styleName="no-results">
+              {
+                needLoad ? LOADING_MESSAGE
+                  : (
+                    `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}`
+                  )
+              }
+            </div>
           )
       }
     </div>

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

@@ -66,8 +66,6 @@ export class ListingContainer extends React.Component {
       filter,
     } = this.props;
 
-    const { needLoad } = this.state;
-
     markHeaderMenu();
 
     if (queryBucket !== activeBucket && _.includes(BUCKETS, queryBucket)) {
@@ -107,10 +105,6 @@ export class ListingContainer extends React.Component {
       });
     }
     // }
-
-    if (needLoad) {
-      this.setState({ needLoad: false });
-    }
   }
 
   componentDidUpdate(prevProps) {
@@ -140,6 +134,7 @@ export class ListingContainer extends React.Component {
       getPastChallenges,
       filterState,
     } = this.props;
+    const { needLoad } = this.state;
     const oldUserId = _.get(prevProps, 'auth.user.userId');
     const userId = _.get(this.props, 'auth.user.userId');
     const handle = _.get(auth, 'user.handle');
@@ -264,6 +259,10 @@ export class ListingContainer extends React.Component {
     }
     if (filterChanged(filter, prevProps.filter)) {
       this.reloadChallenges();
+      if (needLoad) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({ needLoad: false });
+      }
     }
     setTimeout(() => {
       selectBucketDone();