feat: add loading animation when fetching ranks in match details

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>

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,
   },
 

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%',