From 12cc116f0dbb5542eb821fc299a221e5c76c6385 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 2 Dec 2019 18:28:57 +0100
Subject: [PATCH] feat: add loading animation when fetching ranks in match
 details

---
 client/src/components/DotsLoader.vue          | 62 +++++++++++++++++++
 .../components/Match/DetailedMatchTeam.vue    | 21 ++++---
 client/tailwind.config.js                     |  1 +
 3 files changed, 76 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/DotsLoader.vue

diff --git a/client/src/components/DotsLoader.vue b/client/src/components/DotsLoader.vue
new file mode 100644
index 0000000..dfa1fb9
--- /dev/null
+++ b/client/src/components/DotsLoader.vue
@@ -0,0 +1,62 @@
+<template>
+  <div :style="{width: width}" class="spinner text-center">
+    <div :style="dotStyle" class="bounce1 inline-block rounded-full"></div>
+    <div :style="dotStyle" class="bounce2 inline-block rounded-full"></div>
+    <div :style="dotStyle" class="bounce3 inline-block rounded-full"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: '#90cdf4'
+    },
+    dotWidth: {
+      type: String,
+      default: '18px'
+    },
+    width: {
+      type: String,
+      default: '70px'
+    }
+  },
+
+  computed: {
+    dotStyle() {
+      return {
+        backgroundColor: this.color,
+        height: this.dotWidth,
+        width: this.dotWidth
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.spinner > div {
+  animation: bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  animation-delay: -0.16s;
+}
+
+@keyframes bouncedelay {
+  0%,
+  60%,
+  100% {
+    transform: scale(0);
+  }
+
+  30% {
+    transform: scale(0.8);
+  }
+}
+</style>
diff --git a/client/src/components/Match/DetailedMatchTeam.vue b/client/src/components/Match/DetailedMatchTeam.vue
index 9defd57..f1a3da3 100644
--- a/client/src/components/Match/DetailedMatchTeam.vue
+++ b/client/src/components/Match/DetailedMatchTeam.vue
@@ -66,11 +66,11 @@
               </div>
               <div class="ml-1 flex flex-col justify-around">
                 <div
-                  :style="{backgroundImage: `url(${player.firstSum.icon})`}"
+                  :style="{backgroundImage: `url(${player.firstSum ? player.firstSum.icon : null})`}"
                   class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
                 ></div>
                 <div
-                  :style="{backgroundImage: `url(${player.secondSum.icon})`}"
+                  :style="{backgroundImage: `url(${player.secondSum ? player.secondSum.icon : null})`}"
                   class="w-4 h-4 bg-blue-1000 rounded-md bg-center bg-cover"
                 ></div>
               </div>
@@ -89,21 +89,24 @@
                   v-if="player.firstSum"
                   :to="{ name: 'summoner', params: { region: $route.params.region, name: player.name }}"
                   :class="{'font-semibold text-yellow-400': compareSummonernames($route.params.name, player.name)}"
-                  class="w-24 text-sm text-white text-left overflow-hidden text-overflow whitespace-no-wrap hover:text-blue-200"
+                  class="w-22 text-xs text-white text-left overflow-hidden text-overflow whitespace-no-wrap hover:text-blue-200"
                 >{{ player.name }}</router-link>
                 <div
                   v-else
-                  class="w-24 text-sm text-white text-left overflow-hidden text-overflow whitespace-no-wrap"
+                  class="w-22 text-xs text-white text-left overflow-hidden text-overflow whitespace-no-wrap"
                 >{{ player.name }}</div>
-                <div class="text-xs text-teal-500">{{ player.champion.name }}</div>
+                <div class="text-xxs text-teal-500">{{ player.champion.name }}</div>
               </div>
             </div>
-            <div class="ml-1 flex items-center">
+            <div class="flex items-center">
               <div v-if="player.rank">
-                <svg class="w-5 h-5">
+                <svg class="ml-auto w-5 h-5">
                   <use :xlink:href="`#rank-${player.rank.tier.toLowerCase()}`" />
                 </svg>
-                <div class="text-blue-300 text-xs">{{ player.rank.shortName }}</div>
+                <div class="text-blue-300 text-xxs">{{ player.rank.shortName }}</div>
+              </div>
+              <div v-else-if="player.rank === undefined">
+                <DotsLoader width="30px" dot-width="10px" />
               </div>
               <div v-else class="w-5 h-5">
                 <div class="-mt-1 text-blue-300 text-2xl">-</div>
@@ -160,10 +163,12 @@
 <script>
 import { mapState } from 'vuex'
 import { compareSummonernames } from '@/helpers/functions.js'
+import DotsLoader from '@/components/DotsLoader'
 import MatchItems from '@/components/Match/MatchItems'
 
 export default {
   components: {
+    DotsLoader,
     MatchItems,
   },
 
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index a77b989..a431761 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -390,6 +390,7 @@ module.exports = {
     width: theme => ({
       auto: 'auto',
       ...theme('spacing'),
+      '22': '5.5rem',
       '1/2': '50%',
       '1/3': '33.333333%',
       '2/3': '66.666667%',