✨ Add loading spinner

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>
 

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>

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() {