Performance: My Challenges (#11065)

* use the same paging for "myChallenges" only loads 10 per call

* challenges: show loading above the load-more button (instead at the top)

* purple loading message and flat load-more button

* remove comment

* show loadMore button only when the request has 10 entries

* challenge card ui

website/client/components/challenges/findChallenges.vue

@@ -6,7 +6,6 @@
     .row.header-row
       .col-md-8.text-left
         h1(v-once) {{$t('findChallenges')}}
-        h2(v-if='loading') {{ $t('loading') }}
       .col-md-4
         // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
@@ -24,8 +23,11 @@
         challenge-item(:challenge='challenge')
 
     .row
-      .col-12.text-center(v-if='!loading && filteredChallenges.length > 0')
-        button.btn.btn-secondary(@click='loadMore()') {{ $t('loadMore') }}
+      h2.col-12.loading(v-if='loading') {{ $t('loading') }}
+
+    .row
+      .col-12.text-center(v-if='showLoadMore && !loading && filteredChallenges.length > 0')
+        button.btn.btn-flat.btn-show-more(@click='loadMore()') {{ $t('loadMore') }}
 </template>
 
 <style lang='scss' scoped>
@@ -56,6 +58,11 @@
       color: $gray-200;
     }
   }
+
+  .loading {
+    text-align: center;
+    color: $purple-300;
+  }
 </style>
 
 <script>
@@ -78,6 +85,7 @@ export default {
   data () {
     return {
       loading: true,
+      showLoadMore: true,
       icons: Object.freeze({
         positiveIcon,
       }),
@@ -111,7 +119,7 @@ export default {
     };
   },
   mounted () {
-    this.loadchallanges();
+    this.loadChallenges();
   },
   computed: {
     ...mapState({user: 'user.data'}),
@@ -123,17 +131,17 @@ export default {
     updateSearch (eventData) {
       this.search = eventData.searchTerm;
       this.page = 0;
-      this.loadchallanges();
+      this.loadChallenges();
     },
     updateFilters (eventData) {
       this.filters = eventData;
       this.page = 0;
-      this.loadchallanges();
+      this.loadChallenges();
     },
     createChallenge () {
       this.$root.$emit('bv::show::modal', 'challenge-modal');
     },
-    async loadchallanges () {
+    async loadChallenges () {
       this.loading = true;
 
       let categories = '';
@@ -160,6 +168,9 @@ export default {
         this.challenges = this.challenges.concat(challenges);
       }
 
+      // only show the load more Button if the max count was returned
+      this.showLoadMore = challenges.length === 10;
+
       this.loading = false;
     },
     challengeCreated (challenge) {
@@ -167,7 +178,7 @@ export default {
     },
     async loadMore () {
       this.page += 1;
-      this.loadchallanges();
+      this.loadChallenges();
     },
   },
 };