Client: remove unnecessary API calls + members fixes (#12179)

* wip

* refactor world state

* allow resource to be reloaded when the server is updated

* fix #9242

* fix event listeners

* remove un-needed code

* add tests for  asyncResourceFactory reloadOnAppVersionChange

* fix double cron notifications and party members showing up in the header after a party invitation is accepted

* remove console.log

* do not send vm info to loggly due to circular dependency + fix typo

* fix #12181

* do not load invites multiple times in members modal

* add hover to challenge member count

* groups: load members only on demand

* minor ui fixes

* choose class: fix vue duplicate key warning

* minor ui fixes

* challanges: load members on demand

* add loading spinner

* change loading mechanism

* fix loading gryphon issues

* reduce code duplication

website/client/src/components/challenges/challengeDetail.vue

@@ -55,7 +55,7 @@
         </div>
         <div class="col-12 col-md-6 text-right">
           <div
-            class="box"
+            class="box member-count"
             @click="showMemberModal()"
           >
             <div
@@ -93,6 +93,7 @@
             :members="members"
             :challenge-id="challengeId"
             @member-selected="openMemberProgressModal"
+            @opened="initialMembersLoad()"
           />
         </div>
         <div class="col-12 col-md-6 text-right">
@@ -279,6 +280,10 @@
     font-size: 20px;
     vertical-align: bottom;
 
+    &.member-count:hover {
+      cursor: pointer;
+    }
+
     .svg-icon {
       width: 30px;
       display: inline-block;
@@ -364,6 +369,7 @@ export default {
       }),
       challenge: {},
       members: [],
+      membersLoaded: false,
       tasksByType: {
         habit: [],
         daily: [],
@@ -427,8 +433,6 @@ export default {
         this.$router.push('/challenges/findChallenges');
         return;
       }
-      this.members = await this
-        .loadMembers({ challengeId: this.searchId, includeAllPublicFields: true });
       const tasks = await this.$store.dispatch('tasks:getChallengeTasks', { challengeId: this.searchId });
       this.tasksByType = {
         habit: [],
@@ -454,7 +458,22 @@ export default {
       }
       return this.$store.dispatch('members:getChallengeMembers', payload);
     },
+    initialMembersLoad () {
+      this.$store.state.memberModalOptions.loading = true;
+      if (!this.membersLoaded) {
+        this.membersLoaded = true;
 
+        this.loadMembers({
+          challengeId: this.searchId,
+          includeAllPublicFields: true,
+        }).then(m => {
+          this.members.push(...m);
+          this.$store.state.memberModalOptions.loading = false;
+        });
+      } else {
+        this.$store.state.memberModalOptions.loading = false;
+      }
+    },
     editTask (task) {
       this.taskFormPurpose = 'edit';
       this.editingTask = cloneDeep(task);
@@ -489,6 +508,8 @@ export default {
       this.tasksByType[task.type].splice(index, 1);
     },
     showMemberModal () {
+      this.initialMembersLoad();
+
       this.$root.$emit('habitica:show-member-modal', {
         challengeId: this.challenge._id,
         groupId: 'challenge', // @TODO: change these terrible settings
@@ -501,8 +522,8 @@ export default {
     async joinChallenge () {
       this.user.challenges.push(this.searchId);
       this.challenge = await this.$store.dispatch('challenges:joinChallenge', { challengeId: this.searchId });
-      this.members = await this
-        .loadMembers({ challengeId: this.searchId, includeAllPublicFields: true });
+      this.membersLoaded = false;
+      this.members = [];
 
       await this.$store.dispatch('tasks:fetchUserTasks', { forceLoad: true });
     },
@@ -511,10 +532,11 @@ export default {
     },
     async updateChallenge () {
       this.challenge = await this.$store.dispatch('challenges:getChallenge', { challengeId: this.searchId });
-      this.members = await this
-        .loadMembers({ challengeId: this.searchId, includeAllPublicFields: true });
+      this.membersLoaded = false;
+      this.members = [];
     },
     closeChallenge () {
+      this.initialMembersLoad();
       this.$root.$emit('bv::show::modal', 'close-challenge-modal');
     },
     edit () {