Challenges: infinite scroll (#11112)

* debounced infinite scroll on challenges

* add back the normal link color

website/client/assets/scss/tiers.scss

@@ -1,41 +1,41 @@
 .tier1 {
-  color: #c42870 !important;
+  color: #c42870;
 }
 
 .tier2 {
-  color: #b01515 !important;
+  color: #b01515;
 }
 
 .tier3 {
-  color: #d70e14 !important;
+  color: #d70e14;
 }
 
 .tier4 {
-  color: #c24d00 !important;
+  color: #c24d00;
 }
 
 .tier5 {
-  color: #9e650f !important;
+  color: #9e650f;
 }
 
 .tier6 {
-  color: #2b8363 !important;
+  color: #2b8363;
 }
 
 .tier7 {
-  color: #167e87 !important;
+  color: #167e87;
 }
 
 .tier8 {
-  color: #277eab !important;
+  color: #277eab;
 }
 
 .tier9 {
-  color: #6133b4 !important;
+  color: #6133b4;
 }
 
 .tierNPC, .npc {
-  color: #77f4c7 !important;
+  color: #77f4c7;
   fill: #77f4c7;
   stroke: #005737;
 }

website/client/components/challenges/findChallenges.vue

@@ -21,13 +21,13 @@
     .row
       .col-12.col-md-6(v-for='challenge in filteredChallenges')
         challenge-item(:challenge='challenge')
-
-    .row
-      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') }}
+      mugen-scroll(
+        :handler="infiniteScrollTrigger",
+        :should-handle="!loading && canLoadMore",
+        :threshold="1",
+        v-show="loading",
+      )
+        h2.col-12.loading(v-once) {{ $t('loading') }}
 </template>
 
 <style lang='scss' scoped>
@@ -75,17 +75,22 @@ import challengeUtilities from 'client/mixins/challengeUtilities';
 
 import positiveIcon from 'assets/svg/positive.svg';
 
+import MugenScroll from 'vue-mugen-scroll';
+
+import debounce from 'lodash/debounce';
+
 export default {
   mixins: [challengeUtilities],
   components: {
     Sidebar,
     ChallengeItem,
     challengeModal,
+    MugenScroll,
   },
   data () {
     return {
       loading: true,
-      showLoadMore: true,
+      canLoadMore: true,
       icons: Object.freeze({
         positiveIcon,
       }),
@@ -169,17 +174,26 @@ export default {
       }
 
       // only show the load more Button if the max count was returned
-      this.showLoadMore = challenges.length === 10;
+      this.canLoadMore = challenges.length === 10;
 
       this.loading = false;
     },
     challengeCreated (challenge) {
       this.challenges.push(challenge);
     },
-    async loadMore () {
+    infiniteScrollTrigger () {
+      // show loading and wait until the loadMore debounced
+      // or else it would trigger on every scrolling-pixel (while not loading)
+      if (this.canLoadMore) {
+        this.loading = true;
+      }
+
+      this.loadMore();
+    },
+    loadMore: debounce(function loadMoreDebounce () {
       this.page += 1;
       this.loadChallenges();
-    },
+    }, 1000),
   },
 };
 </script>

website/client/components/challenges/myChallenges.vue

@@ -29,13 +29,13 @@
     .row
       .col-12.col-md-6(v-for='challenge in filteredChallenges')
         challenge-item(:challenge='challenge')
-
-    .row
-      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') }}
+      mugen-scroll(
+        :handler="infiniteScrollTrigger",
+        :should-handle="!loading && canLoadMore",
+        :threshold="1",
+        v-show="loading",
+      )
+        h2.col-12.loading(v-once) {{ $t('loading') }}
 </template>
 
 <style lang='scss' scoped>
@@ -88,6 +88,9 @@ import challengeUtilities from 'client/mixins/challengeUtilities';
 
 import challengeIcon from 'assets/svg/challenge.svg';
 import positiveIcon from 'assets/svg/positive.svg';
+import MugenScroll from 'vue-mugen-scroll';
+
+import debounce from 'lodash/debounce';
 
 export default {
   mixins: [challengeUtilities],
@@ -95,6 +98,7 @@ export default {
     Sidebar,
     ChallengeItem,
     challengeModal,
+    MugenScroll,
   },
   data () {
     return {
@@ -103,7 +107,7 @@ export default {
         positiveIcon,
       }),
       loading: false,
-      showLoadMore: true,
+      canLoadMore: true,
       challenges: [],
       sort: 'none',
       sortOptions: [
@@ -202,17 +206,26 @@ export default {
       }
 
       // only show the load more Button if the max count was returned
-      this.showLoadMore = challenges.length === 10;
+      this.canLoadMore = challenges.length === 10;
 
       this.loading = false;
     },
     challengeCreated (challenge) {
       this.challenges.push(challenge);
     },
-    async loadMore () {
+    infiniteScrollTrigger () {
+      // show loading and wait until the loadMore debounced
+      // or else it would trigger on every scrolling-pixel (while not loading)
+      if (this.canLoadMore) {
+        this.loading = true;
+      }
+
+      this.loadMore();
+    },
+    loadMore: debounce(function loadMoreDebounce () {
       this.page += 1;
       this.loadChallenges();
-    },
+    }, 1000),
   },
 };
 </script>

website/client/components/userLink.vue

@@ -11,7 +11,7 @@
 <style scoped lang="scss">
   @import '~client/assets/scss/colors.scss';
 
-  a {
+  a.no-tier {
     color: $gray-50;
   }
 

website/client/mixins/styleHelper.js

@@ -10,7 +10,8 @@ export default {
     userLevelStyleFromLevel (level, npc, style) {
       style = style || '';
       if (npc) style += ' npc';
-      if (level) style +=   ` tier${level}`;
+      style += level ? ` tier${level}` : ' no-tier';
+
       return style;
     },
   },