New client many fixes (#8981)

* Footer style fixes

* Limited string display

* Fixed background reload

* Began adding more avatar items

* Fixed challenge updated cats and official to be seen by admins

* Fixed min prize

* Fixed required fields

* Added my challenges and find challenges to menu

* Removed nav to party page when have no party

* Updated user and notifications icon

* Added accept, reject and messages

* Added selfcare

* Underline links

* Added forgot password

* Fixed task adding

* Disabled habit options that should be

* Added markdown to tags

* Added confirm to delete

* Fixed cancel/delete style

* Fixed rounding

* Added gold icon

* Fixed task icon styles

* Fixed margin botton

* Fixed some repeat styles

* Fixed custom reward style

* Hide like count 0

* Added new tavern images

* Redirect to party page after create

* Hid leader options from non leaders

* Removed manager options from non group plan

* Fixed some nav styles

* Fixed overlay color

* Prevented edit data from being transfered to create

* Added hover state for spells

* Add performance fixes for chat avatars

* Fixed merge conflicts

* Updated fron navigation

* Fixed reg gryphon logo

* Began adding gem modal functionality

* Added purchase gems with gold

* Fixed restore

* Replaced description with summary

* Spells that target tasks fix

* Added initial challenge task load

* Fixed lint issue

website/client/components/chat/chatMessages.vue

@@ -35,7 +35,7 @@
             span.action(v-if='msg.uuid === user._id', @click='remove(msg, index)')
               .svg-icon(v-html="icons.delete")
               | {{$t('delete')}}
-            span.action.float-right
+            span.action.float-right(v-if='likeCount(msg) > 0')
               .svg-icon(v-html="icons.liked")
               | + {{ likeCount(msg) }}
     .row(v-if='user._id === msg.uuid')
@@ -58,7 +58,7 @@
             span.action(v-if='msg.uuid === user._id', @click='remove(msg, index)')
               .svg-icon(v-html="icons.delete")
               | {{$t('delete')}}
-            span.action.float-right
+            span.action.float-right(v-if='likeCount(msg) > 0')
               .svg-icon(v-html="icons.liked")
               | + {{ likeCount(msg) }}
       .col-2
@@ -128,6 +128,7 @@ import axios from 'axios';
 import moment from 'moment';
 import cloneDeep from 'lodash/cloneDeep';
 import { mapState } from 'client/libs/store';
+import throttle from 'lodash/throttle';
 import markdownDirective from 'client/directives/markdown';
 import Avatar from '../avatar';
 import styleHelper from 'client/mixins/styleHelper';
@@ -155,6 +156,14 @@ export default {
   mounted () {
     this.loadProfileCache();
   },
+  created () {
+    window.addEventListener('scroll', throttle(() => {
+      this.loadProfileCache(window.scrollY / 1000);
+    }, 1000));
+  },
+  destroyed () {
+    // window.removeEventListener('scroll', this.handleScroll);
+  },
   data () {
     return {
       icons: Object.freeze({
@@ -167,6 +176,8 @@ export default {
       copyingMessage: {},
       currentDayDividerDisplay: moment().day(),
       cachedProfileData: {},
+      currentProfileLoadedCount: 0,
+      currentProfileLoadedEnd: 10,
     };
   },
   filters: {
@@ -191,14 +202,22 @@ export default {
     },
   },
   methods: {
-    async loadProfileCache () {
+    async loadProfileCache (screenPosition) {
       let promises = [];
 
+      // @TODO: write an explination
+      if (screenPosition && Math.floor(screenPosition) + 1 > this.currentProfileLoadedEnd / 10) {
+        this.currentProfileLoadedEnd = 10 * (Math.floor(screenPosition) + 1);
+      } else {
+        return;
+      }
+
       this.messages.forEach(message => {
         let uuid = message.uuid;
         if (uuid && !this.cachedProfileData[uuid]) {
-          if (uuid === 'system') return;
+          if (uuid === 'system' || this.currentProfileLoadedCount === this.currentProfileLoadedEnd) return;
           promises.push(axios.get(`/api/v3/members/${uuid}`));
+          this.currentProfileLoadedCount += 1;
         }
       });