Don't show "no guilds" texts while loading (#10665)

* Don't show "no guilds" texts while loading

Unified styling of "no guilds" message with my challenges page
Fixes #10662

* Don't show "no challenges" texts while loading

Add loading indicator (similar to find challenges & my guilds pages)

* Change gray color

* Set challenge icon color

website/client/components/challenges/myChallenges.vue

@@ -7,6 +7,7 @@
     .row.header-row
       .col-md-8.text-left
         h1(v-once) {{$t('myChallenges')}}
+        h2(v-if='loading && challenges.length === 0') {{ $t('loading') }}
       .col-md-4
         // @TODO: implement sorting span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
@@ -16,7 +17,7 @@
           span(v-once) {{$t('createChallenge')}}
 
     .row
-      .no-challenges.text-center.col-md-6.offset-3(v-if='filteredChallenges.length === 0')
+      .no-challenges.text-center.col-md-6.offset-3(v-if='!loading && challenges.length === 0')
         .svg-icon(v-html="icons.challengeIcon")
         h2(v-once) {{$t('noChallengeTitle')}}
         p(v-once) {{$t('challengeDescription1')}}
@@ -48,14 +49,15 @@
   }
 
   .no-challenges {
-    color: $gray-300;
+    color: $gray-200;
     margin-top: 10em;
 
     h2 {
-      color: $gray-300;
+      color: $gray-200;
     }
 
     .svg-icon {
+      color: #C3C0C7;
       width: 88.7px;
       margin: 1em auto;
     }
@@ -84,6 +86,7 @@ export default {
         challengeIcon,
         positiveIcon,
       }),
+      loading: false,
       challenges: [],
       sort: 'none',
       sortOptions: [
@@ -113,7 +116,7 @@ export default {
     };
   },
   mounted () {
-    this.loadchallanges();
+    this.loadChallenges();
   },
   computed: {
     filteredChallenges () {
@@ -138,10 +141,12 @@ export default {
       this.$store.state.challengeOptions.workingChallenge = {};
       this.$root.$emit('bv::show::modal', 'challenge-modal');
     },
-    async loadchallanges () {
+    async loadChallenges () {
+      this.loading = true;
       this.challenges = await this.$store.dispatch('challenges:getUserChallenges', {
         member: true,
       });
+      this.loading = false;
     },
     challengeCreated (challenge) {
       this.challenges.push(challenge);

website/client/components/groups/myGuilds.vue

@@ -2,18 +2,11 @@
 .row
   sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
 
-  .no-guilds.standard-page(v-if='filteredGuilds.length === 0')
-    .no-guilds-wrapper
-      .svg-icon(v-html='icons.greyBadge')
-      h2 {{$t('noGuildsTitle')}}
-      p {{$t('noGuildsParagraph1')}}
-      p {{$t('noGuildsParagraph2')}}
-      span(v-if='loading') {{ $t('loading') }}
-
-  .standard-page(v-if='filteredGuilds.length > 0')
+  .standard-page
     .row
-      .col-md-8
-        h1.page-header.float-left(v-once) {{ $t('myGuilds') }}
+      .col-md-8.text-left
+        h1.page-header(v-once) {{ $t('myGuilds') }}
+        h2(v-if='loading && guilds.length === 0') {{ $t('loading') }}
       .col-4
         button.btn.btn-secondary.create-group-button.float-right(@click='createGroup()')
           .svg-icon.positive-icon(v-html="icons.positiveIcon")
@@ -22,6 +15,14 @@
           span.dropdown-label {{ $t('sortBy') }}
           b-dropdown(:text="$t('sort')", right=true)
             b-dropdown-item(v-for='sortOption in sortOptions', :key="sortOption.value", @click='sort(sortOption.value)') {{sortOption.text}}
+
+    .row
+      .no-guilds.text-center.col-md-6.offset-md-3(v-if='!loading && guilds.length === 0')
+        .svg-icon(v-html='icons.greyBadge')
+        h2(v-once) {{$t('noGuildsTitle')}}
+        p(v-once) {{$t('noGuildsParagraph1')}}
+        p(v-once) {{$t('noGuildsParagraph2')}}
+
     .row
       .col-md-12
         public-guild-item(v-for="guild in filteredGuilds", :key='guild._id', :guild="guild", :display-gem-bank='true')
@@ -41,29 +42,16 @@
   }
 
   .no-guilds {
-    text-align: center;
     color: $gray-200;
-    margin-top: 15em;
+    margin-top: 10em;
 
-    p {
-      font-size: 14px;
-      line-height: 1.43;
+    h2 {
+      color: $gray-200;
     }
 
-    .no-guilds-wrapper {
-      width: 400px;
-      margin: 0 auto;
-
-      .svg-icon {
-        width: 60px;
-        margin: 0 auto;
-      }
-    }
-  }
-
-  @media only screen and (max-width: 768px) {
-    .no-guilds-wrapper {
-      width: 100% !important;
+    .svg-icon {
+      width: 88.7px;
+      margin: 1em auto;
     }
   }
 </style>