From d0bd66d1f7750d6033d861c3c45828e865ec5c4a Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Fri, 27 Dec 2019 22:09:24 +0100
Subject: [PATCH] refactor: loader in 2 steps

---
 .../components/Summoner/SummonerLoader.vue    | 76 +-----------------
 client/src/layouts/Default.vue                | 11 +--
 client/src/store/modules/summoner.js          |  8 +-
 client/src/views/Summoner.vue                 | 80 ++++++++++++++++++-
 client/src/views/SummonerChampions.vue        | 33 ++++----
 5 files changed, 110 insertions(+), 98 deletions(-)

diff --git a/client/src/components/Summoner/SummonerLoader.vue b/client/src/components/Summoner/SummonerLoader.vue
index 415a91b..2cba84c 100644
--- a/client/src/components/Summoner/SummonerLoader.vue
+++ b/client/src/components/Summoner/SummonerLoader.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="text-white pb-12">
+  <div class="text-white">
     <div class="flex justify-between">
-      <div style="width: 517px; height: 272px;">
+      <div style="width: 517px; height: 244px;">
         <content-loader
           :height="272"
           :width="517"
@@ -149,78 +149,6 @@
         </content-loader>
       </div>
     </div>
-
-    <div class="mt-4 text-center">
-      <div
-        v-for="index in 10"
-        :key="index"
-        class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
-        style="width: 1160px; height: 144px;"
-      >
-        <content-loader
-          :height="144"
-          :width="1160"
-          :speed="2"
-          primary-color="#17314f"
-          secondary-color="#2b6cb0"
-        >
-          <rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
-          <rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
-          <rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
-          <rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
-          <rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
-          <rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
-          <rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
-          <rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
-          <rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
-          <rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
-          <rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
-          <rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
-          <rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
-          <rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
-          <rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
-          <rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
-          <rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
-          <rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
-          <rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
-          <circle cx="862" cy="32" r="12" />
-          <circle cx="862" cy="52" r="12" />
-          <circle cx="862" cy="72" r="12" />
-          <circle cx="862" cy="92" r="12" />
-          <circle cx="862" cy="112" r="12" />
-          <circle cx="926" cy="32" r="12" />
-          <circle cx="926" cy="52" r="12" />
-          <circle cx="926" cy="72" r="12" />
-          <circle cx="926" cy="92" r="12" />
-          <circle cx="926" cy="112" r="12" />
-          <rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
-          <rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
-          <rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
-          <rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
-          <rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
-          <rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
-          <rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
-          <rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
-          <rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
-          <rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
-          <circle cx="1106" cy="50.55" r="11.88" />
-          <rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
-          <rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
-        </content-loader>
-      </div>
-    </div>
-
-    <div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
-      <content-loader
-        :height="40"
-        :width="135"
-        :speed="2"
-        primary-color="#17314f"
-        secondary-color="#2b6cb0"
-      >
-        <rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
-      </content-loader>
-    </div>
   </div>
 </template>
 
diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue
index 102b4be..bbe2f7c 100644
--- a/client/src/layouts/Default.vue
+++ b/client/src/layouts/Default.vue
@@ -19,7 +19,7 @@
       </header>
 
       <template v-if="summonerFound">
-        <div class="text-white pb-12">
+        <div class="text-white">
           <div class="flex justify-between items-center">
             <div>
               <div class="flex items-center">
@@ -70,18 +70,19 @@
             class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
             exact
           >champions</router-link>
-          <transition
+          <!-- <transition
             enter-active-class="transition-all transition-fast ease-out-quad"
             enter-class="opacity-0 scale-90"
             enter-to-class="opacity-100 scale-100"
-          >
-            <slot></slot>
-          </transition>
+          > -->
+          <slot></slot>
+          <!-- </transition> -->
         </div>
       </template>
 
       <template v-else-if="summonerLoading">
         <SummonerLoader />
+        <slot></slot>
       </template>
 
       <template v-else-if="summonerNotFound">
diff --git a/client/src/store/modules/summoner.js b/client/src/store/modules/summoner.js
index fb4c67a..89b1522 100644
--- a/client/src/store/modules/summoner.js
+++ b/client/src/store/modules/summoner.js
@@ -27,6 +27,7 @@ export const state = {
 export const mutations = {
   BASIC_REQUEST(state) {
     state.basic.status = 'loading'
+    state.champions.championsLoaded = false
   },
   CHAMPIONS_FOUND(state, { champions }) {
     state.champions.list = champions
@@ -54,7 +55,6 @@ export const mutations = {
     state.basic.ranked = infos.ranked
     state.basic.playing = infos.playing
     state.basic.status = 'found'
-    state.champions.championsLoaded = false
   },
   SUMMONER_NOT_FOUND(state) {
     state.basic.status = 'error'
@@ -108,6 +108,12 @@ export const actions = {
   },
   async overviewRequest({ commit }) {
     const resp = await axios(({ url: 'summoner-overview', data: { account: state.basic.account }, method: 'POST' })).catch(() => { })
+    // setTimeout(() => {
+    //   console.log('OVERVIEW')
+    //   console.log(resp.data)
+    //   resp.data.matches = createMatchData(resp.data.matchesDetails)
+    //   commit('OVERVIEW_FOUND', resp.data)
+    // }, 2000)
     console.log('OVERVIEW')
     console.log(resp.data)
     resp.data.matches = createMatchData(resp.data.matchesDetails)
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index d8ecf95..5530153 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -21,10 +21,84 @@
       >More matches</LoadingButton>
     </div>
   </div>
+  <div v-else class="" style="margin-top: 1.75rem">
+    <div class="mt-4 text-center">
+      <div
+        v-for="index in 10"
+        :key="index"
+        class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
+        style="width: 1160px; height: 144px;"
+      >
+        <content-loader
+          :height="144"
+          :width="1160"
+          :speed="2"
+          primary-color="#17314f"
+          secondary-color="#2b6cb0"
+        >
+          <rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
+          <rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
+          <rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
+          <rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
+          <rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
+          <rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
+          <rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
+          <rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
+          <rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
+          <rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
+          <rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
+          <rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
+          <rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
+          <rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
+          <rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
+          <rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
+          <rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
+          <rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
+          <rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
+          <circle cx="862" cy="32" r="12" />
+          <circle cx="862" cy="52" r="12" />
+          <circle cx="862" cy="72" r="12" />
+          <circle cx="862" cy="92" r="12" />
+          <circle cx="862" cy="112" r="12" />
+          <circle cx="926" cy="32" r="12" />
+          <circle cx="926" cy="52" r="12" />
+          <circle cx="926" cy="72" r="12" />
+          <circle cx="926" cy="92" r="12" />
+          <circle cx="926" cy="112" r="12" />
+          <rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
+          <rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
+          <rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
+          <rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
+          <rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
+          <rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
+          <rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
+          <rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
+          <rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
+          <rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
+          <circle cx="1106" cy="50.55" r="11.88" />
+          <rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
+          <rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
+        </content-loader>
+      </div>
+    </div>
+
+    <div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
+      <content-loader
+        :height="40"
+        :width="135"
+        :speed="2"
+        primary-color="#17314f"
+        secondary-color="#2b6cb0"
+      >
+        <rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
+      </content-loader>
+    </div>
+  </div>
 </template>
 
 
 <script>
+import { ContentLoader } from 'vue-content-loader'
 import { mapState, mapActions, mapGetters } from 'vuex'
 import LoadingButton from '@/components/LoadingButton.vue'
 import Match from '@/components/Match/Match.vue'
@@ -34,6 +108,7 @@ import SummonerStats from '@/components/Summoner/Overview/SummonerStats.vue'
 
 export default {
   components: {
+    ContentLoader,
     LoadingButton,
     Match,
     SummonerChampions,
@@ -45,11 +120,12 @@ export default {
     ...mapState({
       overview: state => state.summoner.overview
     }),
-    ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded'])
+    ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])
   },
 
   created() {
-    this.overviewRequest()
+    if(this.summonerFound)
+      this.overviewRequest()
   },
 
   methods: {
diff --git a/client/src/views/SummonerChampions.vue b/client/src/views/SummonerChampions.vue
index 7aeb508..2642497 100644
--- a/client/src/views/SummonerChampions.vue
+++ b/client/src/views/SummonerChampions.vue
@@ -1,24 +1,23 @@
 <template>
-  <div>
-    <div class="mt-3">
-      <template v-if="championsLoaded">
-        <div class="mt-4 flex items-center">
-          <ChampionsSearch @search-champions="updateSearch" />
-          <FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
-        </div>
-        <ChampionsTable
-          v-if="champions.length"
-          :champions="champions"
-          :search="searchChampions"
-          class="mt-6"
-        />
-      </template>
+  <div v-if="championsLoaded" class="mt-3">
+    <div class="mt-4 flex items-center">
+      <ChampionsSearch @search-champions="updateSearch" />
+      <FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
     </div>
+    <ChampionsTable
+      v-if="champions.length"
+      :champions="champions"
+      :search="searchChampions"
+      class="mt-6"
+    />
+  </div>
+  <div v-else class="mt-3">
+    <div class="mt-4 text-white">LOADING CHAMPIONS</div>
   </div>
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapGetters, mapState } from 'vuex'
 import { gameModes } from '@/data/data.js'
 import ChampionsSearch from '@/components/Summoner/Champions/ChampionsSearch.vue'
 import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue'
@@ -53,6 +52,7 @@ export default {
         }, {})
       return { '-1': { type: 'Normal', name: 'ALL QUEUES' }, ...queues }
     },
+    ...mapGetters('summoner', ['summonerFound']),
     ...mapState({
       champions: state => state.summoner.champions.list,
       championsLoaded: state => state.summoner.champions.championsLoaded,
@@ -61,7 +61,8 @@ export default {
   },
 
   created() {
-    if (!this.championsLoaded) {
+    console.log('HELLO')
+    if (!this.championsLoaded && this.summonerFound) {
       console.log('FETCH CHAMPIONS')
       this.championStats()
     }