From 595332825a1f0ea3588497ae881071f4525c3cfd Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Fri, 8 Sep 2023 09:21:40 +0200
Subject: [PATCH] add loading spinner

---
 client/src/components/ui/loadingMessage.vue |  33 ++++++
 client/src/components/ui/loadingSpinner.vue | 112 ++++++++++++++++++++
 2 files changed, 145 insertions(+)
 create mode 100644 client/src/components/ui/loadingMessage.vue
 create mode 100644 client/src/components/ui/loadingSpinner.vue

diff --git a/client/src/components/ui/loadingMessage.vue b/client/src/components/ui/loadingMessage.vue
new file mode 100644
index 00000000..120d037a
--- /dev/null
+++ b/client/src/components/ui/loadingMessage.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="loading-message">
+    <loading-spinner class="loading-message__spinner" />
+    <span class="loading-message__text"><slot></slot> </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LoadingSpinner from "@/components/ui/loadingSpinner.vue";
+</script>
+
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+.loading-message {
+  display: flex;
+  align-items: center;
+
+  &__icon {
+    width: $large-icon-dimension;
+    height: $large-icon-dimension;
+    fill: $color-brand;
+    margin-right: $large-spacing;
+  }
+
+  &__text {
+    @include regular-text;
+    color: $color-brand;
+    margin-right: $medium-spacing;
+  }
+}
+</style>
diff --git a/client/src/components/ui/loadingSpinner.vue b/client/src/components/ui/loadingSpinner.vue
new file mode 100644
index 00000000..fc85b9d3
--- /dev/null
+++ b/client/src/components/ui/loadingSpinner.vue
@@ -0,0 +1,112 @@
+
+<template>
+<div class="loading-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+</template>
+
+<style scoped lang="scss">
+@import 'styles/helpers';
+
+.loading-spinner {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+
+   div {
+    animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    transform-origin: 40px 40px;
+  }
+
+   div:after {
+    content: " ";
+    display: block;
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: $color-brand;
+    margin: -4px 0 0 -4px;
+  }
+
+   div:nth-child(1) {
+    animation-delay: -0.036s;
+  }
+
+   div:nth-child(1):after {
+    top: 63px;
+    left: 63px;
+  }
+
+   div:nth-child(2) {
+    animation-delay: -0.072s;
+  }
+
+   div:nth-child(2):after {
+    top: 68px;
+    left: 56px;
+  }
+
+   div:nth-child(3) {
+    animation-delay: -0.108s;
+  }
+
+   div:nth-child(3):after {
+    top: 71px;
+    left: 48px;
+  }
+
+   div:nth-child(4) {
+    animation-delay: -0.144s;
+  }
+
+   div:nth-child(4):after {
+    top: 72px;
+    left: 40px;
+  }
+
+   div:nth-child(5) {
+    animation-delay: -0.18s;
+  }
+
+   div:nth-child(5):after {
+    top: 71px;
+    left: 32px;
+  }
+
+   div:nth-child(6) {
+    animation-delay: -0.216s;
+  }
+
+   div:nth-child(6):after {
+    top: 68px;
+    left: 24px;
+  }
+
+   div:nth-child(7) {
+    animation-delay: -0.252s;
+  }
+
+   div:nth-child(7):after {
+    top: 63px;
+    left: 17px;
+  }
+
+   div:nth-child(8) {
+    animation-delay: -0.288s;
+  }
+
+   div:nth-child(8):after {
+    top: 56px;
+    left: 12px;
+  }
+}
+@keyframes loading-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+</style>