From 8db630389abfdfecce8241de313f90e513e3baf5 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 20 Jun 2020 17:50:41 +0200
Subject: [PATCH] feat: better loading in match details

---
 client/src/components/Common/CubeLoader.vue   | 86 +++++++++++++++++++
 client/src/components/Match/DetailedMatch.vue |  6 +-
 client/tailwind.config.js                     |  1 +
 3 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Common/CubeLoader.vue

diff --git a/client/src/components/Common/CubeLoader.vue b/client/src/components/Common/CubeLoader.vue
new file mode 100644
index 0000000..4736278
--- /dev/null
+++ b/client/src/components/Common/CubeLoader.vue
@@ -0,0 +1,86 @@
+<template>
+  <div
+    :style="{ width: size, height: size, margin }"
+    class="relative"
+    style="transform: rotateZ(45deg);"
+  >
+    <div class="relative float-left w-1/2 cube-1 cube h-1/2"></div>
+    <div class="relative float-left w-1/2 cube-2 cube h-1/2"></div>
+    <div class="relative float-left w-1/2 cube-4 cube h-1/2"></div>
+    <div class="relative float-left w-1/2 cube-3 cube h-1/2"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: '#bee3f8'
+    },
+    size: {
+      type: String,
+      default: '30px'
+    },
+    margin: {
+      type: String,
+      default: '0 auto'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cube {
+  transform: scale(1.1);
+}
+
+.cube:before {
+  content: "";
+  @apply absolute top-0 left-0 w-full h-full bg-blue-300;
+  animation: cubeAngle 2.4s infinite linear both;
+  transform-origin: 100% 100%;
+}
+
+.cube-2 {
+  transform: scale(1.1) rotateZ(90deg);
+}
+
+.cube-3 {
+  transform: scale(1.1) rotateZ(180deg);
+}
+
+.cube-4 {
+  transform: scale(1.1) rotateZ(270deg);
+}
+
+.cube-2:before {
+  animation-delay: 0.3s;
+}
+
+.cube-3:before {
+  animation-delay: 0.6s;
+}
+
+.cube-4:before {
+  animation-delay: 0.9s;
+}
+
+@keyframes cubeAngle {
+  0%,
+  10% {
+    @apply opacity-0;
+    transform: perspective(130px) rotateX(-180deg);
+  }
+  25%,
+  75% {
+    @apply opacity-100;
+    transform: perspective(130px) rotateX(0deg);
+  }
+  90%,
+  100% {
+    @apply opacity-0;
+    transform: perspective(130px) rotateY(180deg);
+  }
+}
+</style>
diff --git a/client/src/components/Match/DetailedMatch.vue b/client/src/components/Match/DetailedMatch.vue
index e10c8a9..bdf2686 100644
--- a/client/src/components/Match/DetailedMatch.vue
+++ b/client/src/components/Match/DetailedMatch.vue
@@ -26,19 +26,23 @@
       />
     </div>
     <div v-else-if="data.status === 'loading' && detailsOpen">
-      <p class="py-5 text-lg font-semibold text-blue-100 bg-blue-800">Loading...</p>
+      <div class="py-5 bg-blue-800 rounded-b-lg">
+        <CubeLoader />
+      </div>
     </div>
   </transition>
 </template>
 
 <script>
 import { mapActions, mapState } from 'vuex'
+import CubeLoader from '@/components/Common/CubeLoader.vue'
 import DetailedMatchGlobalStats from '@/components/Match/DetailedMatchGlobalStats.vue'
 import DetailedMatchTeam from '@/components/Match/DetailedMatchTeam.vue'
 import SwitchToggle from '@/components/Form/SwitchToggle.vue'
 
 export default {
   components: {
+    CubeLoader,
     DetailedMatchGlobalStats,
     DetailedMatchTeam,
     SwitchToggle,
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 07e6aeb..f7e69bb 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -293,6 +293,7 @@ module.exports = {
       full: '100%',
       screen: '100vh',
       '200': '50rem',
+      '1/2': '50%',
     }),
     inset: {
       '0': '0',