🚸 Add loading indicator to timetable view

src/views/TimetableView.vue

@@ -1,8 +1,10 @@
 <script setup>
 import TimetableSetup from "../components/timetable-setup.vue";
-import { classList, classFilter } from "../store";
+import { classList, classFilter, timetable } from "../store";
 import DayCarousel from "../components/day-carousel.vue";
 import TimetableList from "../components/timetable-list.vue";
+import InfoCard from "../components/info-card.vue";
+import { ClockIcon } from "lucide-vue-next";
 </script>
 
 <template>
@@ -11,5 +13,26 @@ import TimetableList from "../components/timetable-list.vue";
     :options="classList"
     v-model="classFilter"
   />
+  <div
+    class="cardContainer"
+    v-show="(timetable.data || []).length == 0 && classFilter != 'none'"
+  >
+    <InfoCard
+      class="card"
+      :icon="ClockIcon"
+      :title="$t('infoCard.titles.loading')"
+      :text="$t('infoCard.texts.loadingTimetable')"
+    />
+  </div>
   <DayCarousel v-show="classFilter != 'none'" :element="TimetableList" />
 </template>
+
+<style scoped>
+.cardContainer {
+  position: relative;
+}
+
+.card {
+  padding: 10px;
+}
+</style>