From 9d2854ad25466eb1e6d2c8c1387999eb6c944da5 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 30 Dec 2019 22:51:19 +0100
Subject: [PATCH] feat: add content loader on champions tab

---
 .../Summoner/Champions/ChampionsTable.vue     | 37 ++++++++++++++++++-
 client/src/views/SummonerChampions.vue        | 12 +-----
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Summoner/Champions/ChampionsTable.vue b/client/src/components/Summoner/Champions/ChampionsTable.vue
index 08d2885..330d4b1 100644
--- a/client/src/components/Summoner/Champions/ChampionsTable.vue
+++ b/client/src/components/Summoner/Champions/ChampionsTable.vue
@@ -20,7 +20,7 @@
         ></th>
       </tr>
     </thead>
-    <tbody class="bg-blue-760">
+    <tbody v-if="champions.length" class="bg-blue-760">
       <tr
         v-for="(champion, index) in championsToDisplay"
         :key="champion._id"
@@ -95,13 +95,48 @@
         >{{ champion.lastPlayed }}</td>
       </tr>
     </tbody>
+    <tbody v-else>
+      <tr v-for="index in 11" :key="index">
+        <td colspan="14">
+          <content-loader
+            :height="50"
+            :width="1200"
+            :speed="2"
+            primary-color="#17314f"
+            secondary-color="#2b6cb0"
+          >
+            <rect x="31" y="16" rx="3" ry="3" width="20" height="20" />
+            <circle cx="101" cy="26" r="12" />
+            <rect x="119" y="16" rx="3" ry="3" width="50" height="20" />
+            <rect x="234.5" y="16" rx="3" ry="3" width="45" height="20" />
+            <rect x="316.5" y="16" rx="3" ry="3" width="45" height="20" />
+            <rect x="398.5" y="16" rx="3" ry="3" width="45" height="20" />
+            <rect x="480.5" y="16" rx="3" ry="3" width="45" height="20" />
+            <rect x="565" y="14" rx="3" ry="3" width="40" height="10" />
+            <rect x="558" y="30" rx="3" ry="3" width="55" height="10" />
+            <rect x="644.5" y="16" rx="3" ry="3" width="45" height="20" />
+            <rect x="726.5" y="16" rx="3" ry="3" width="45" height="20" />
+            <rect x="808.5" y="16" rx="3" ry="3" width="45" height="20" />
+            <rect x="890.5" y="16" rx="3" ry="3" width="45" height="20" />
+            <rect x="972.5" y="16" rx="3" ry="3" width="45" height="20" />
+            <rect x="1052" y="16" rx="3" ry="3" width="50" height="20" />
+            <rect x="1129" y="16" rx="3" ry="3" width="60" height="20" />
+          </content-loader>
+        </td>
+      </tr>
+    </tbody>
   </table>
 </template>
 
 <script>
+import { ContentLoader } from 'vue-content-loader'
 import { timeDifference } from '@/helpers/functions.js'
 
 export default {
+  components: {
+    ContentLoader,
+  },
+
   props: {
     champions: {
       type: Array,
diff --git a/client/src/views/SummonerChampions.vue b/client/src/views/SummonerChampions.vue
index b2b6b1d..ab253e1 100644
--- a/client/src/views/SummonerChampions.vue
+++ b/client/src/views/SummonerChampions.vue
@@ -1,18 +1,10 @@
 <template>
-  <div v-if="championsLoaded" key="champions" class="mt-3">
+  <div 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" />
     </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>
+    <ChampionsTable :champions="champions" :search="searchChampions" class="mt-6" />
   </div>
 </template>