✨ Add loading spinner

src/components/date-selector.vue

@@ -4,6 +4,7 @@ import {
   selectedDay,
   fetchSubstitutions,
   fetchHistory,
+  loading,
 } from "../store";
 import { dayNames } from "../definitions";
 import dayjs from "dayjs";
@@ -23,8 +24,10 @@ function previousDay() {
 }
 async function changeDate(newDate) {
   selectedDate.value = new Date(newDate.toDate().setUTCHours(0, 0, 0, 0));
+  loading.value = true;
   await fetchSubstitutions();
   await fetchHistory();
+  loading.value = false;
 }
 </script>
 

src/components/loading-element.vue

@@ -0,0 +1,51 @@
+<script setup>
+defineProps({
+  active: {
+    required: true,
+    type: Boolean,
+  },
+});
+</script>
+
+<template>
+  <div class="container" :class="active ? 'active' : ''">
+    <span class="loader"></span>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background-color: var(--bg-color);
+  height: 0px;
+  margin: 0px;
+  opacity: 0;
+  transition: all 0.8s;
+  transition-delay: 0.2s;
+}
+.container.active {
+  height: 100px;
+  opacity: 1;
+}
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid;
+  border-color: #7ca74b transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>