From e546f942d82e96b4b09c871f794a5ef2a7c831d1 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sun, 29 Dec 2019 21:26:52 +0100
Subject: [PATCH] refactor: work on overview tab loader - almost done

---
 .../components/Summoner/SummonerLoader.vue    | 236 ++++++++--------
 client/src/views/Summoner.vue                 | 252 +++++++++++++-----
 2 files changed, 308 insertions(+), 180 deletions(-)

diff --git a/client/src/components/Summoner/SummonerLoader.vue b/client/src/components/Summoner/SummonerLoader.vue
index 8ec50af..c583217 100644
--- a/client/src/components/Summoner/SummonerLoader.vue
+++ b/client/src/components/Summoner/SummonerLoader.vue
@@ -21,129 +21,129 @@
         </content-loader>
       </div>
 
-      <div class="bg-blue-800 rounded-lg" style="width: 351px; height: 210px;">
+      <div class="bg-blue-800 rounded-lg" style="width: 347px; height: 215px;">
         <content-loader
-          :height="210"
-          :width="351"
+          :height="215"
+          :width="347"
           :speed="2"
           primary-color="#17314f"
           secondary-color="#2b6cb0"
         >
-          <rect x="11" y="15" rx="3" ry="3" width="111.65" height="19" />
-          <rect x="53" y="40" rx="3" ry="3" width="30" height="11" />
-          <rect x="135" y="40" rx="3" ry="3" width="30" height="11" />
-          <rect x="220" y="40" rx="3" ry="3" width="30" height="11" />
-          <rect x="302" y="40" rx="3" ry="3" width="30" height="11" />
-          <rect x="10" y="61" rx="3" ry="3" width="22" height="11" />
-          <rect x="10" y="81" rx="3" ry="3" width="22" height="11" />
-          <rect x="10" y="101" rx="3" ry="3" width="22" height="11" />
-          <rect x="10" y="121" rx="3" ry="3" width="22" height="11" />
-          <rect x="10" y="141" rx="3" ry="3" width="22" height="11" />
-          <rect x="10" y="161" rx="3" ry="3" width="22" height="11" />
-          <rect x="10" y="181" rx="3" ry="3" width="22" height="11" />
-          <rect x="43" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="43" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="43" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="43" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="43" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="43" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="43" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="63" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="63" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="63" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="63" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="63" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="63" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="63" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="83" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="83" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="83" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="83" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="83" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="83" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="83" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="103" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="103" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="103" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="103" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="103" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="103" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="103" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="123" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="123" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="123" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="123" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="123" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="123" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="123" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="143" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="143" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="143" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="143" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="143" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="143" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="143" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="163" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="163" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="163" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="163" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="163" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="163" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="163" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="183" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="183" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="183" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="183" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="183" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="183" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="183" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="203" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="203" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="203" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="203" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="203" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="203" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="203" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="223" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="223" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="223" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="223" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="223" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="223" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="223" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="243" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="243" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="243" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="243" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="243" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="243" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="243" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="263" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="263" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="263" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="263" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="263" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="263" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="263" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="283" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="283" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="283" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="283" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="283" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="283" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="283" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="303" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="303" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="303" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="303" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="303" y="138" rx="0" ry="0" width="16" height="16" />
-          <rect x="303" y="158" rx="0" ry="0" width="16" height="16" />
-          <rect x="303" y="178" rx="0" ry="0" width="16" height="16" />
-          <rect x="323" y="58" rx="0" ry="0" width="16" height="16" />
-          <rect x="323" y="78" rx="0" ry="0" width="16" height="16" />
-          <rect x="323" y="98" rx="0" ry="0" width="16" height="16" />
-          <rect x="323" y="118" rx="0" ry="0" width="16" height="16" />
-          <rect x="323" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="110" y="10" rx="3" ry="3" width="130" height="19" />
+          <rect x="53" y="45" rx="3" ry="3" width="30" height="11" />
+          <rect x="135" y="45" rx="3" ry="3" width="30" height="11" />
+          <rect x="220" y="45" rx="3" ry="3" width="30" height="11" />
+          <rect x="305" y="45" rx="3" ry="3" width="30" height="11" />
+          <rect x="10" y="66" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="86" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="106" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="126" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="146" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="166" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="186" rx="3" ry="3" width="22" height="11" />
+          <rect x="38" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="38" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="38" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="38" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="38" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="38" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="38" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="58" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="58" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="58" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="58" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="58" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="58" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="58" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="78" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="78" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="78" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="78" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="78" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="78" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="78" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="98" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="98" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="98" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="98" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="98" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="98" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="98" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="118" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="118" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="118" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="118" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="118" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="118" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="118" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="138" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="138" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="138" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="138" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="138" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="138" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="138" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="158" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="158" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="158" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="158" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="158" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="158" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="158" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="178" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="178" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="178" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="178" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="178" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="178" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="178" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="198" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="198" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="198" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="198" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="198" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="198" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="198" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="218" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="218" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="218" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="218" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="218" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="218" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="218" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="238" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="238" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="238" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="238" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="238" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="238" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="238" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="258" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="258" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="258" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="258" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="258" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="258" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="258" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="278" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="278" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="278" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="278" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="278" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="278" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="278" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="298" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="298" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="298" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="298" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="298" y="144" rx="0" ry="0" width="16" height="16" />
+          <rect x="298" y="164" rx="0" ry="0" width="16" height="16" />
+          <rect x="298" y="184" rx="0" ry="0" width="16" height="16" />
+          <rect x="318" y="64" rx="0" ry="0" width="16" height="16" />
+          <rect x="318" y="84" rx="0" ry="0" width="16" height="16" />
+          <rect x="318" y="104" rx="0" ry="0" width="16" height="16" />
+          <rect x="318" y="124" rx="0" ry="0" width="16" height="16" />
+          <rect x="318" y="144" rx="0" ry="0" width="16" height="16" />
         </content-loader>
       </div>
     </div>
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index ab68f4e..cd29117 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -21,77 +21,205 @@
       >More matches</LoadingButton>
     </div>
   </div>
-  <div v-else 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;"
-      >
+  <div v-else class="mt-3 flex text-center">
+    <div class="mt-4 w-3/12">
+      <div class="bg-blue-800 rounded-lg" style="width: 300px; height: 339px;">
         <content-loader
-          :height="144"
-          :width="1160"
+          :height="339"
+          :width="300"
           :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" />
+          <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-800 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>
-
-    <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"
+    <div class="w-9/12">
+      <div
+        v-for="index in 10"
+        :key="index"
+        class="mt-4 ml-4 bg-blue-800 rounded-lg"
+        style="width: 884px; height: 144px;"
       >
-        <rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
-      </content-loader>
+        <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>