From ee07c7bd0d27c086573a48e98f4b13365b9fb18a Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 21 Oct 2019 17:50:13 +0200
Subject: [PATCH] feat: add skeleton loading for the load more matches button

---
 client/src/components/SummonerLoader.vue | 126 ++++++++++++-----------
 1 file changed, 68 insertions(+), 58 deletions(-)

diff --git a/client/src/components/SummonerLoader.vue b/client/src/components/SummonerLoader.vue
index e45fa8a..85ebe8e 100644
--- a/client/src/components/SummonerLoader.vue
+++ b/client/src/components/SummonerLoader.vue
@@ -151,65 +151,75 @@
     </div>
 
     <div class="mt-12 text-center">
-      <ul class="text-gray-900">
-        <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-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"
         >
-          <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>
-      </ul>
+          <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>