From 72c8b3adc1f8850638fffff06d41ebf04f5ff2b0 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Thu, 2 Jun 2022 21:55:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20loading=20spinner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        | 10 +++++-
 src/components/date-selector.vue   |  3 ++
 src/components/loading-element.vue | 51 ++++++++++++++++++++++++++++++
 src/store.js                       |  5 +++
 4 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/components/loading-element.vue

diff --git a/src/App.vue b/src/App.vue
index efd391e..e092685 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,12 +3,20 @@ import { RouterView } from "vue-router";
 import TitleBar from "./components/titlebar-element.vue";
 import BottomNavbar from "./components/bottom-navbar.vue";
 import DateSelector from "./components/date-selector.vue";
+import LoadingElement from "./components/loading-element.vue";
+import { loading } from "./store";
 </script>
 
 <template>
   <TitleBar />
   <DateSelector v-show="$route.name != 'Settings' && $route.name != 'Login'" />
-  <RouterView />
+  <main>
+    <LoadingElement
+      :active="loading"
+      v-show="$route.name != 'Settings' && $route.name != 'Login'"
+    />
+    <RouterView />
+  </main>
   <BottomNavbar v-show="$route.name != 'Login'" />
 </template>
 
diff --git a/src/components/date-selector.vue b/src/components/date-selector.vue
index 8617f11..19f583d 100644
--- a/src/components/date-selector.vue
+++ b/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>
 
diff --git a/src/components/loading-element.vue b/src/components/loading-element.vue
new file mode 100644
index 0000000..699db7a
--- /dev/null
+++ b/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>
diff --git a/src/store.js b/src/store.js
index 356f09a..21e71a7 100644
--- a/src/store.js
+++ b/src/store.js
@@ -3,6 +3,7 @@ import { ref, watch } from "vue";
 import router from "./router";
 
 export const lastRoute = ref();
+export const loading = ref(false);
 
 export const substitutionFilter = ref(
   localStorage.getItem("substitutionFilter") || "all"
@@ -66,6 +67,8 @@ export const parsedTimetable = computed(() => {
 const baseUrl = import.meta.env.VITE_API_ENDPOINT || "/api";
 
 export async function fetchData() {
+  loading.value = true;
+
   const checkResponse = await fetch(`${baseUrl}/check`);
   if (checkResponse.status != 200) router.push("/login");
 
@@ -73,6 +76,8 @@ export async function fetchData() {
   fetchTimetable();
   fetchSubstitutions();
   fetchHistory();
+
+  loading.value = false;
 }
 
 export async function fetchClassList() {