From 0a8b1fa6228ca9a6dbd385c1999d4e4c4e926e36 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Wed, 1 Jan 2020 17:04:55 +0100
Subject: [PATCH] refactor: rename loaders files

---
 .../{SummonerLoader.vue => HeaderLoader.vue}  |   2 +-
 .../Summoner/Overview/OverviewLoader.vue      | 267 ++++++++++++++++++
 client/src/layouts/Default.vue                |   6 +-
 client/src/views/Summoner.vue                 | 260 +----------------
 4 files changed, 275 insertions(+), 260 deletions(-)
 rename client/src/components/Summoner/{SummonerLoader.vue => HeaderLoader.vue} (99%)
 create mode 100644 client/src/components/Summoner/Overview/OverviewLoader.vue

diff --git a/client/src/components/Summoner/SummonerLoader.vue b/client/src/components/Summoner/HeaderLoader.vue
similarity index 99%
rename from client/src/components/Summoner/SummonerLoader.vue
rename to client/src/components/Summoner/HeaderLoader.vue
index c583217..e5da336 100644
--- a/client/src/components/Summoner/SummonerLoader.vue
+++ b/client/src/components/Summoner/HeaderLoader.vue
@@ -21,7 +21,7 @@
         </content-loader>
       </div>
 
-      <div class="bg-blue-800 rounded-lg" style="width: 347px; height: 215px;">
+      <div class="bg-blue-850 rounded-lg" style="width: 347px; height: 215px;">
         <content-loader
           :height="215"
           :width="347"
diff --git a/client/src/components/Summoner/Overview/OverviewLoader.vue b/client/src/components/Summoner/Overview/OverviewLoader.vue
new file mode 100644
index 0000000..ae1a237
--- /dev/null
+++ b/client/src/components/Summoner/Overview/OverviewLoader.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="mt-3 flex text-center">
+    <div class="mt-4 w-3/12">
+      <div class="bg-blue-850 rounded-lg" style="width: 300px; height: 339px;">
+        <content-loader
+          :height="339"
+          :width="300"
+          :speed="2"
+          primary-color="#17314f"
+          secondary-color="#2b6cb0"
+        >
+          <rect x="94" y="18" rx="3" ry="3" width="111" height="24" />
+          <rect x="23" y="76" rx="3" ry="3" width="74" height="12" />
+          <rect x="130" y="76" rx="3" ry="3" width="34" height="12" />
+          <rect x="185" y="76" rx="3" ry="3" width="48" height="12" />
+          <rect x="246" y="76" rx="3" ry="3" width="30" height="12" />
+          <circle cx="40" cy="123" r="16" />
+          <rect x="60" y="116" rx="3" ry="3" width="49" height="13" />
+          <rect x="130" y="116" rx="3" ry="3" width="42" height="16" />
+          <rect x="185" y="116" rx="3" ry="3" width="42" height="16" />
+          <rect x="246" y="116" rx="3" ry="3" width="42" height="16" />
+          <circle cx="40" cy="171" r="16" />
+          <rect x="60" y="163" rx="3" ry="3" width="49" height="13" />
+          <rect x="130" y="163" rx="3" ry="3" width="42" height="16" />
+          <rect x="185" y="163" rx="3" ry="3" width="42" height="16" />
+          <rect x="246" y="163" rx="3" ry="3" width="42" height="16" />
+          <circle cx="40" cy="219" r="16" />
+          <rect x="60" y="212" rx="3" ry="3" width="49" height="13" />
+          <rect x="130" y="212" rx="3" ry="3" width="42" height="16" />
+          <rect x="185" y="212" rx="3" ry="3" width="42" height="16" />
+          <rect x="246" y="212" rx="3" ry="3" width="42" height="16" />
+          <circle cx="40" cy="267" r="16" />
+          <rect x="60" y="260" rx="3" ry="3" width="49" height="13" />
+          <rect x="130" y="260" rx="3" ry="3" width="42" height="16" />
+          <rect x="185" y="260" rx="3" ry="3" width="42" height="16" />
+          <rect x="246" y="260" rx="3" ry="3" width="42" height="16" />
+          <circle cx="40" cy="315" r="16" />
+          <rect x="60" y="308" rx="3" ry="3" width="49" height="13" />
+          <rect x="130" y="308" rx="3" ry="3" width="42" height="16" />
+          <rect x="185" y="308" rx="3" ry="3" width="42" height="16" />
+          <rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
+        </content-loader>
+      </div>
+      <div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 828px;">
+        <content-loader
+          :height="828"
+          :width="300"
+          :speed="2"
+          primary-color="#17314f"
+          secondary-color="#2b6cb0"
+        >
+          <rect x="122" y="17" rx="3" ry="3" width="55" height="24" />
+          <rect x="26" y="72" rx="4" ry="4" width="8" height="51" />
+          <rect x="86" y="72" rx="4" ry="4" width="8" height="51" />
+          <rect x="146" y="72" rx="4" ry="4" width="8" height="51" />
+          <rect x="206" y="72" rx="4" ry="4" width="8" height="51" />
+          <rect x="266" y="72" rx="4" ry="4" width="8" height="51" />
+          <rect x="22" y="128" rx="3" ry="3" width="16" height="16" />
+          <rect x="82" y="128" rx="3" ry="3" width="16" height="16" />
+          <rect x="142" y="128" rx="3" ry="3" width="16" height="16" />
+          <rect x="202" y="128" rx="3" ry="3" width="16" height="16" />
+          <rect x="262" y="128" rx="3" ry="3" width="16" height="16" />
+          <rect x="14" y="182" rx="3" ry="3" width="45" height="16" />
+          <rect x="93" y="182" rx="3" ry="3" width="45" height="16" />
+          <rect x="155" y="182" rx="3" ry="3" width="58" height="16" />
+          <rect x="250" y="182" rx="3" ry="3" width="33" height="16" />
+          <rect x="14" y="212" rx="3" ry="3" width="45" height="12" />
+          <rect x="93" y="212" rx="3" ry="3" width="45" height="12" />
+          <rect x="168" y="212" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="212" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="237" rx="3" ry="3" width="45" height="12" />
+          <rect x="93" y="237" rx="3" ry="3" width="45" height="12" />
+          <rect x="168" y="237" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="237" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="262" rx="3" ry="3" width="45" height="12" />
+          <rect x="93" y="262" rx="3" ry="3" width="45" height="12" />
+          <rect x="168" y="262" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="262" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="287" rx="3" ry="3" width="45" height="12" />
+          <rect x="93" y="287" rx="3" ry="3" width="45" height="12" />
+          <rect x="168" y="287" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="287" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="312" rx="3" ry="3" width="45" height="12" />
+          <rect x="93" y="312" rx="3" ry="3" width="45" height="12" />
+          <rect x="168" y="312" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="312" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="337" rx="3" ry="3" width="105" height="12" />
+          <rect x="238" y="337" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="362" rx="3" ry="3" width="85" height="12" />
+          <rect x="238" y="362" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="397" rx="3" ry="3" width="115" height="16" />
+          <rect x="150" y="397" rx="3" ry="3" width="65" height="16" />
+          <rect x="223" y="397" rx="3" ry="3" width="60" height="16" />
+          <rect x="14" y="427" rx="3" ry="3" width="95" height="12" />
+          <rect x="165" y="427" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="427" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="452" rx="3" ry="3" width="95" height="12" />
+          <rect x="165" y="452" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="452" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="487" rx="3" ry="3" width="115" height="16" />
+          <rect x="150" y="487" rx="3" ry="3" width="65" height="16" />
+          <rect x="223" y="487" rx="3" ry="3" width="60" height="16" />
+          <rect x="14" y="517" rx="3" ry="3" width="95" height="12" />
+          <rect x="165" y="517" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="517" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="542" rx="3" ry="3" width="95" height="12" />
+          <rect x="165" y="542" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="542" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="577" rx="3" ry="3" width="115" height="16" />
+          <rect x="150" y="577" rx="3" ry="3" width="65" height="16" />
+          <rect x="223" y="577" rx="3" ry="3" width="60" height="16" />
+          <rect x="14" y="607" rx="3" ry="3" width="50" height="12" />
+          <rect x="165" y="607" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="607" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="632" rx="3" ry="3" width="50" height="12" />
+          <rect x="165" y="632" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="632" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="657" rx="3" ry="3" width="50" height="12" />
+          <rect x="165" y="657" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="657" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="682" rx="3" ry="3" width="50" height="12" />
+          <rect x="165" y="682" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="682" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="707" rx="3" ry="3" width="50" height="12" />
+          <rect x="165" y="707" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="707" rx="3" ry="3" width="45" height="12" />
+          <rect x="14" y="732" rx="3" ry="3" width="50" height="12" />
+          <rect x="165" y="732" rx="3" ry="3" width="45" height="12" />
+          <rect x="238" y="732" rx="3" ry="3" width="45" height="12" />
+          <rect x="122" y="762" rx="3" ry="3" width="55" height="20" />
+          <rect x="115" y="789" rx="3" ry="3" width="70" height="12" />
+          <rect x="110" y="805" rx="3" ry="3" width="80" height="12" />
+        </content-loader>
+      </div>
+
+      <div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 384px;">
+        <content-loader
+          :height="384"
+          :width="300"
+          :speed="2"
+          primary-color="#17314f"
+          secondary-color="#2b6cb0"
+        >
+          <rect x="112" y="17" rx="3" ry="3" width="75" height="24" />
+          <rect x="14" y="70" rx="3" ry="3" width="80" height="16" />
+          <rect x="150" y="70" rx="3" ry="3" width="40" height="16" />
+          <rect x="217" y="70" rx="3" ry="3" width="59" height="16" />
+          <rect x="14" y="100" rx="3" ry="3" width="85" height="12" />
+          <rect x="145" y="100" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="100" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="121" rx="3" ry="3" width="65" height="12" />
+          <rect x="145" y="121" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="121" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="142" rx="3" ry="3" width="85" height="12" />
+          <rect x="145" y="142" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="142" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="163" rx="3" ry="3" width="115" height="12" />
+          <rect x="145" y="163" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="163" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="184" rx="3" ry="3" width="85" height="12" />
+          <rect x="145" y="184" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="184" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="205" rx="3" ry="3" width="85" height="12" />
+          <rect x="145" y="205" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="205" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="226" rx="3" ry="3" width="65" height="12" />
+          <rect x="145" y="226" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="226" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="247" rx="3" ry="3" width="115" height="12" />
+          <rect x="145" y="247" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="247" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="268" rx="3" ry="3" width="115" height="12" />
+          <rect x="145" y="268" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="268" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="289" rx="3" ry="3" width="85" height="12" />
+          <rect x="145" y="289" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="289" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="310" rx="3" ry="3" width="65" height="12" />
+          <rect x="145" y="310" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="310" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="331" rx="3" ry="3" width="115" height="12" />
+          <rect x="145" y="331" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="331" rx="3" ry="3" width="65" height="12" />
+          <rect x="14" y="352" rx="3" ry="3" width="85" height="12" />
+          <rect x="145" y="352" rx="3" ry="3" width="45" height="12" />
+          <rect x="218" y="352" rx="3" ry="3" width="65" height="12" />
+        </content-loader>
+      </div>
+    </div>
+    <div class="w-9/12">
+      <div
+        v-for="index in 10"
+        :key="index"
+        class="mt-4 ml-4 bg-blue-850 rounded-lg"
+        style="width: 884px; height: 144px;"
+      >
+        <content-loader
+          :height="144"
+          :width="884"
+          :speed="2"
+          primary-color="#17314f"
+          secondary-color="#2b6cb0"
+        >
+          <rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
+          <rect x="140" y="40" rx="6" ry="6" width="24" height="24" />
+          <rect x="140" y="72" rx="6" ry="6" width="24" height="24" />
+          <rect x="206" y="46" rx="3" ry="3" width="81" height="22" />
+          <rect x="218" y="74" rx="3" ry="3" width="59" height="16" />
+          <rect x="305" y="36" rx="6" ry="6" width="32" height="32" />
+          <rect x="341" y="36" rx="6" ry="6" width="32" height="32" />
+          <rect x="377" y="36" rx="6" ry="6" width="32" height="32" />
+          <rect x="305" y="72" rx="6" ry="6" width="32" height="32" />
+          <rect x="341" y="72" rx="6" ry="6" width="32" height="32" />
+          <rect x="377" y="72" rx="6" ry="6" width="32" height="32" />
+          <rect x="430" y="45" rx="3" ry="3" width="50" height="10" />
+          <rect x="430" y="60" rx="3" ry="3" width="50" height="10" />
+          <rect x="430" y="75" rx="3" ry="3" width="70" height="10" />
+          <rect x="430" y="90" rx="3" ry="3" width="70" height="10" />
+          <circle cx="608" cy="32" r="12" />
+          <circle cx="608" cy="52" r="12" />
+          <circle cx="608" cy="72" r="12" />
+          <circle cx="608" cy="92" r="12" />
+          <circle cx="608" cy="112" r="12" />
+          <circle cx="672" cy="32" r="12" />
+          <circle cx="672" cy="52" r="12" />
+          <circle cx="672" cy="72" r="12" />
+          <circle cx="672" cy="92" r="12" />
+          <circle cx="672" cy="112" r="12" />
+          <rect x="516" y="29" rx="3" ry="3" width="72" height="9" />
+          <rect x="516" y="49" rx="3" ry="3" width="72" height="9" />
+          <rect x="516" y="69" rx="3" ry="3" width="72" height="9" />
+          <rect x="516" y="89" rx="3" ry="3" width="72" height="9" />
+          <rect x="516" y="109" rx="3" ry="3" width="72" height="9" />
+          <rect x="691" y="29" rx="3" ry="3" width="72" height="9" />
+          <rect x="691" y="49" rx="3" ry="3" width="72" height="9" />
+          <rect x="691" y="69" rx="3" ry="3" width="72" height="9" />
+          <rect x="691" y="89" rx="3" ry="3" width="72" height="9" />
+          <rect x="691" y="109" rx="3" ry="3" width="72" height="9" />
+          <circle cx="830" cy="50" r="12" />
+          <rect x="800" y="66" rx="3" ry="3" width="64" height="17" />
+          <rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
+        </content-loader>
+      </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>
+  </div>
+</template>
+
+<script>
+import { ContentLoader } from 'vue-content-loader'
+
+export default {
+  components: {
+    ContentLoader
+  }
+}
+</script>
diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue
index b322a9b..1932547 100644
--- a/client/src/layouts/Default.vue
+++ b/client/src/layouts/Default.vue
@@ -20,7 +20,7 @@
 
       <template v-if="summonerLoading || summonerFound">
         <template v-if="summonerLoading">
-          <SummonerLoader />
+          <HeaderLoader />
         </template>
         <template v-else-if="summonerFound">
           <div class="flex justify-between items-center">
@@ -100,7 +100,7 @@ import LazyBackground from '@/components/LazyBackgroundImage.vue'
 import MainFooter from '@/components/MainFooter.vue'
 import RecentActivity from '@/components/Summoner/RecentActivity.vue'
 import SearchForm from '@/components/SearchForm.vue'
-import SummonerLoader from '@/components/Summoner/SummonerLoader.vue'
+import HeaderLoader from '@/components/Summoner/HeaderLoader.vue'
 import SummonerRanked from '@/components/Summoner/SummonerRanked.vue'
 
 export default {
@@ -109,7 +109,7 @@ export default {
     MainFooter,
     RecentActivity,
     SearchForm,
-    SummonerLoader,
+    HeaderLoader,
     SummonerRanked,
   },
 
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index f84036b..c33180d 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -21,278 +21,26 @@
       >More matches</LoadingButton>
     </div>
   </div>
-  <div v-else class="mt-3 flex text-center">
-    <div class="mt-4 w-3/12">
-      <div class="bg-blue-850 rounded-lg" style="width: 300px; height: 339px;">
-        <content-loader
-          :height="339"
-          :width="300"
-          :speed="2"
-          primary-color="#17314f"
-          secondary-color="#2b6cb0"
-        >
-          <rect x="94" y="18" rx="3" ry="3" width="111" height="24" />
-          <rect x="23" y="76" rx="3" ry="3" width="74" height="12" />
-          <rect x="130" y="76" rx="3" ry="3" width="34" height="12" />
-          <rect x="185" y="76" rx="3" ry="3" width="48" height="12" />
-          <rect x="246" y="76" rx="3" ry="3" width="30" height="12" />
-          <circle cx="40" cy="123" r="16" />
-          <rect x="60" y="116" rx="3" ry="3" width="49" height="13" />
-          <rect x="130" y="116" rx="3" ry="3" width="42" height="16" />
-          <rect x="185" y="116" rx="3" ry="3" width="42" height="16" />
-          <rect x="246" y="116" rx="3" ry="3" width="42" height="16" />
-          <circle cx="40" cy="171" r="16" />
-          <rect x="60" y="163" rx="3" ry="3" width="49" height="13" />
-          <rect x="130" y="163" rx="3" ry="3" width="42" height="16" />
-          <rect x="185" y="163" rx="3" ry="3" width="42" height="16" />
-          <rect x="246" y="163" rx="3" ry="3" width="42" height="16" />
-          <circle cx="40" cy="219" r="16" />
-          <rect x="60" y="212" rx="3" ry="3" width="49" height="13" />
-          <rect x="130" y="212" rx="3" ry="3" width="42" height="16" />
-          <rect x="185" y="212" rx="3" ry="3" width="42" height="16" />
-          <rect x="246" y="212" rx="3" ry="3" width="42" height="16" />
-          <circle cx="40" cy="267" r="16" />
-          <rect x="60" y="260" rx="3" ry="3" width="49" height="13" />
-          <rect x="130" y="260" rx="3" ry="3" width="42" height="16" />
-          <rect x="185" y="260" rx="3" ry="3" width="42" height="16" />
-          <rect x="246" y="260" rx="3" ry="3" width="42" height="16" />
-          <circle cx="40" cy="315" r="16" />
-          <rect x="60" y="308" rx="3" ry="3" width="49" height="13" />
-          <rect x="130" y="308" rx="3" ry="3" width="42" height="16" />
-          <rect x="185" y="308" rx="3" ry="3" width="42" height="16" />
-          <rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
-        </content-loader>
-      </div>
-      <div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 828px;">
-        <content-loader
-          :height="828"
-          :width="300"
-          :speed="2"
-          primary-color="#17314f"
-          secondary-color="#2b6cb0"
-        >
-          <rect x="122" y="17" rx="3" ry="3" width="55" height="24" />
-          <rect x="26" y="72" rx="4" ry="4" width="8" height="51" />
-          <rect x="86" y="72" rx="4" ry="4" width="8" height="51" />
-          <rect x="146" y="72" rx="4" ry="4" width="8" height="51" />
-          <rect x="206" y="72" rx="4" ry="4" width="8" height="51" />
-          <rect x="266" y="72" rx="4" ry="4" width="8" height="51" />
-          <rect x="22" y="128" rx="3" ry="3" width="16" height="16" />
-          <rect x="82" y="128" rx="3" ry="3" width="16" height="16" />
-          <rect x="142" y="128" rx="3" ry="3" width="16" height="16" />
-          <rect x="202" y="128" rx="3" ry="3" width="16" height="16" />
-          <rect x="262" y="128" rx="3" ry="3" width="16" height="16" />
-          <rect x="14" y="182" rx="3" ry="3" width="45" height="16" />
-          <rect x="93" y="182" rx="3" ry="3" width="45" height="16" />
-          <rect x="155" y="182" rx="3" ry="3" width="58" height="16" />
-          <rect x="250" y="182" rx="3" ry="3" width="33" height="16" />
-          <rect x="14" y="212" rx="3" ry="3" width="45" height="12" />
-          <rect x="93" y="212" rx="3" ry="3" width="45" height="12" />
-          <rect x="168" y="212" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="212" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="237" rx="3" ry="3" width="45" height="12" />
-          <rect x="93" y="237" rx="3" ry="3" width="45" height="12" />
-          <rect x="168" y="237" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="237" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="262" rx="3" ry="3" width="45" height="12" />
-          <rect x="93" y="262" rx="3" ry="3" width="45" height="12" />
-          <rect x="168" y="262" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="262" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="287" rx="3" ry="3" width="45" height="12" />
-          <rect x="93" y="287" rx="3" ry="3" width="45" height="12" />
-          <rect x="168" y="287" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="287" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="312" rx="3" ry="3" width="45" height="12" />
-          <rect x="93" y="312" rx="3" ry="3" width="45" height="12" />
-          <rect x="168" y="312" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="312" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="337" rx="3" ry="3" width="105" height="12" />
-          <rect x="238" y="337" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="362" rx="3" ry="3" width="85" height="12" />
-          <rect x="238" y="362" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="397" rx="3" ry="3" width="115" height="16" />
-          <rect x="150" y="397" rx="3" ry="3" width="65" height="16" />
-          <rect x="223" y="397" rx="3" ry="3" width="60" height="16" />
-          <rect x="14" y="427" rx="3" ry="3" width="95" height="12" />
-          <rect x="165" y="427" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="427" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="452" rx="3" ry="3" width="95" height="12" />
-          <rect x="165" y="452" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="452" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="487" rx="3" ry="3" width="115" height="16" />
-          <rect x="150" y="487" rx="3" ry="3" width="65" height="16" />
-          <rect x="223" y="487" rx="3" ry="3" width="60" height="16" />
-          <rect x="14" y="517" rx="3" ry="3" width="95" height="12" />
-          <rect x="165" y="517" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="517" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="542" rx="3" ry="3" width="95" height="12" />
-          <rect x="165" y="542" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="542" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="577" rx="3" ry="3" width="115" height="16" />
-          <rect x="150" y="577" rx="3" ry="3" width="65" height="16" />
-          <rect x="223" y="577" rx="3" ry="3" width="60" height="16" />
-          <rect x="14" y="607" rx="3" ry="3" width="50" height="12" />
-          <rect x="165" y="607" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="607" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="632" rx="3" ry="3" width="50" height="12" />
-          <rect x="165" y="632" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="632" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="657" rx="3" ry="3" width="50" height="12" />
-          <rect x="165" y="657" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="657" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="682" rx="3" ry="3" width="50" height="12" />
-          <rect x="165" y="682" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="682" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="707" rx="3" ry="3" width="50" height="12" />
-          <rect x="165" y="707" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="707" rx="3" ry="3" width="45" height="12" />
-          <rect x="14" y="732" rx="3" ry="3" width="50" height="12" />
-          <rect x="165" y="732" rx="3" ry="3" width="45" height="12" />
-          <rect x="238" y="732" rx="3" ry="3" width="45" height="12" />
-          <rect x="122" y="762" rx="3" ry="3" width="55" height="20" />
-          <rect x="115" y="789" rx="3" ry="3" width="70" height="12" />
-          <rect x="110" y="805" rx="3" ry="3" width="80" height="12" />
-        </content-loader>
-      </div>
-
-      <div class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 384px;">
-        <content-loader
-          :height="384"
-          :width="300"
-          :speed="2"
-          primary-color="#17314f"
-          secondary-color="#2b6cb0"
-        >
-          <rect x="112" y="17" rx="3" ry="3" width="75" height="24" />
-          <rect x="14" y="70" rx="3" ry="3" width="80" height="16" />
-          <rect x="150" y="70" rx="3" ry="3" width="40" height="16" />
-          <rect x="217" y="70" rx="3" ry="3" width="59" height="16" />
-          <rect x="14" y="100" rx="3" ry="3" width="85" height="12" />
-          <rect x="145" y="100" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="100" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="121" rx="3" ry="3" width="65" height="12" />
-          <rect x="145" y="121" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="121" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="142" rx="3" ry="3" width="85" height="12" />
-          <rect x="145" y="142" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="142" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="163" rx="3" ry="3" width="115" height="12" />
-          <rect x="145" y="163" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="163" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="184" rx="3" ry="3" width="85" height="12" />
-          <rect x="145" y="184" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="184" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="205" rx="3" ry="3" width="85" height="12" />
-          <rect x="145" y="205" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="205" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="226" rx="3" ry="3" width="65" height="12" />
-          <rect x="145" y="226" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="226" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="247" rx="3" ry="3" width="115" height="12" />
-          <rect x="145" y="247" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="247" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="268" rx="3" ry="3" width="115" height="12" />
-          <rect x="145" y="268" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="268" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="289" rx="3" ry="3" width="85" height="12" />
-          <rect x="145" y="289" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="289" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="310" rx="3" ry="3" width="65" height="12" />
-          <rect x="145" y="310" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="310" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="331" rx="3" ry="3" width="115" height="12" />
-          <rect x="145" y="331" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="331" rx="3" ry="3" width="65" height="12" />
-          <rect x="14" y="352" rx="3" ry="3" width="85" height="12" />
-          <rect x="145" y="352" rx="3" ry="3" width="45" height="12" />
-          <rect x="218" y="352" rx="3" ry="3" width="65" height="12" />
-        </content-loader>
-      </div>
-    </div>
-    <div class="w-9/12">
-      <div
-        v-for="index in 10"
-        :key="index"
-        class="mt-4 ml-4 bg-blue-850 rounded-lg"
-        style="width: 884px; height: 144px;"
-      >
-        <content-loader
-          :height="144"
-          :width="884"
-          :speed="2"
-          primary-color="#17314f"
-          secondary-color="#2b6cb0"
-        >
-          <rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
-          <rect x="140" y="40" rx="6" ry="6" width="24" height="24" />
-          <rect x="140" y="72" rx="6" ry="6" width="24" height="24" />
-          <rect x="206" y="46" rx="3" ry="3" width="81" height="22" />
-          <rect x="218" y="74" rx="3" ry="3" width="59" height="16" />
-          <rect x="305" y="36" rx="6" ry="6" width="32" height="32" />
-          <rect x="341" y="36" rx="6" ry="6" width="32" height="32" />
-          <rect x="377" y="36" rx="6" ry="6" width="32" height="32" />
-          <rect x="305" y="72" rx="6" ry="6" width="32" height="32" />
-          <rect x="341" y="72" rx="6" ry="6" width="32" height="32" />
-          <rect x="377" y="72" rx="6" ry="6" width="32" height="32" />
-          <rect x="430" y="45" rx="3" ry="3" width="50" height="10" />
-          <rect x="430" y="60" rx="3" ry="3" width="50" height="10" />
-          <rect x="430" y="75" rx="3" ry="3" width="70" height="10" />
-          <rect x="430" y="90" rx="3" ry="3" width="70" height="10" />
-          <circle cx="608" cy="32" r="12" />
-          <circle cx="608" cy="52" r="12" />
-          <circle cx="608" cy="72" r="12" />
-          <circle cx="608" cy="92" r="12" />
-          <circle cx="608" cy="112" r="12" />
-          <circle cx="672" cy="32" r="12" />
-          <circle cx="672" cy="52" r="12" />
-          <circle cx="672" cy="72" r="12" />
-          <circle cx="672" cy="92" r="12" />
-          <circle cx="672" cy="112" r="12" />
-          <rect x="516" y="29" rx="3" ry="3" width="72" height="9" />
-          <rect x="516" y="49" rx="3" ry="3" width="72" height="9" />
-          <rect x="516" y="69" rx="3" ry="3" width="72" height="9" />
-          <rect x="516" y="89" rx="3" ry="3" width="72" height="9" />
-          <rect x="516" y="109" rx="3" ry="3" width="72" height="9" />
-          <rect x="691" y="29" rx="3" ry="3" width="72" height="9" />
-          <rect x="691" y="49" rx="3" ry="3" width="72" height="9" />
-          <rect x="691" y="69" rx="3" ry="3" width="72" height="9" />
-          <rect x="691" y="89" rx="3" ry="3" width="72" height="9" />
-          <rect x="691" y="109" rx="3" ry="3" width="72" height="9" />
-          <circle cx="830" cy="50" r="12" />
-          <rect x="800" y="66" rx="3" ry="3" width="64" height="17" />
-          <rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
-        </content-loader>
-      </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>
+  <div v-else>
+    <OverviewLoader />
   </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'
+import OverviewLoader from '@/components/Summoner/Overview/OverviewLoader.vue'
 import SummonerChampions from '@/components/Summoner/Overview/SummonerChampions.vue'
 import SummonerMates from '@/components/Summoner/Overview/SummonerMates.vue'
 import SummonerStats from '@/components/Summoner/Overview/SummonerStats.vue'
 
 export default {
   components: {
-    ContentLoader,
     LoadingButton,
     Match,
+    OverviewLoader,
     SummonerChampions,
     SummonerMates,
     SummonerStats,