refactor: transition between tabs is now working again

client/src/layouts/Default.vue

@@ -7,7 +7,7 @@
       transition-name="fade"
     ></LazyBackground>
 
-    <div class="relative page-wrapper mx-auto z-10 flex-grow">
+    <div class="relative page-wrapper mx-auto z-10 flex-grow text-white">
       <header class="text-teal-100">
         <div class="flex justify-between items-center">
           <router-link to="/">
@@ -18,8 +18,11 @@
         </div>
       </header>
 
-      <template v-if="summonerFound">
+      <template v-if="summonerLoading || summonerFound">
-        <div class="text-white">
+        <template v-if="summonerLoading">
+          <SummonerLoader />
+        </template>
+        <template v-else-if="summonerFound">
           <div class="flex justify-between items-center">
             <div>
               <div class="flex items-center">
@@ -70,19 +73,15 @@
             class="ml-4 pb-2 border-b-2 border-transparent text-blue-300 cursor-pointer hover:text-blue-100"
             exact
           >champions</router-link>
-          <!-- <transition
+        </template>
-            enter-active-class="transition-all transition-fast ease-out-quad"
+        <!-- View -->
-            enter-class="opacity-0 scale-90"
+        <transition
-            enter-to-class="opacity-100 scale-100"
+          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> -->
+        </transition>
-        </div>
-      </template>
-
-      <template v-else-if="summonerLoading">
-        <SummonerLoader />
-        <slot></slot>
       </template>
 
       <template v-else-if="summonerNotFound">

client/src/views/Summoner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="overviewLoaded" class="mt-3 flex text-center">
+  <div v-if="overviewLoaded" key="overview" class="mt-3 flex text-center">
     <div class="mt-4 w-3/12">
       <SummonerChampions />
       <SummonerStats />
@@ -21,7 +21,7 @@
       >More matches</LoadingButton>
     </div>
   </div>
-  <div v-else class="" style="margin-top: 1.75rem">
+  <div v-else style="margin-top: 1.75rem">
     <div class="mt-4 text-center">
       <div
         v-for="index in 10"
@@ -123,13 +123,24 @@ export default {
     ...mapGetters('summoner', ['matchesLoading', 'moreMatchesToFetch', 'overviewLoaded', 'summonerFound'])
   },
 
+  watch: {
+    summonerFound() {
+      this.fetchData()
+    }
+  },
+
   created() {
-    if(this.summonerFound)
+    this.fetchData()
-      this.overviewRequest()
   },
 
   methods: {
+    fetchData() {
+      if (this.summonerFound) {
+        console.log('FETCHING OVERVIEW')
+        this.overviewRequest()
+      }
+    },
     ...mapActions('summoner', ['moreMatches', 'overviewRequest']),
-  }
+  },
 }
 </script>

client/src/views/SummonerChampions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="championsLoaded" class="mt-3">
+  <div v-if="championsLoaded" key="champions" class="mt-3">
     <div class="mt-4 flex items-center">
       <ChampionsSearch @search-champions="updateSearch" />
       <FilterQueue @filter-queue="filterByQueue" :choices="queues" class="ml-4" />
@@ -60,15 +60,23 @@ export default {
     })
   },
 
-  created() {
+  watch: {
-    console.log('HELLO')
+    summonerFound() {
-    if (!this.championsLoaded && this.summonerFound) {
+      this.fetchData()
-      console.log('FETCH CHAMPIONS')
-      this.championStats()
     }
   },
 
+  created() {
+    this.fetchData()
+  },
+
   methods: {
+    fetchData() {
+      if (!this.championsLoaded && this.summonerFound) {
+        console.log('FETCHING CHAMPIONS')
+        this.championStats()
+      }
+    },
     filterByQueue(queue) {
       queue = Number(queue)
       queue = queue === -1 ? null : queue