From 626fdcb46c4ceef2c8e660a51d8a6d91138354d5 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Sun, 4 Jun 2023 16:10:54 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Add=20loading=20indicator=20to?=
 =?UTF-8?q?=20timetable=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/TimetableView.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/views/TimetableView.vue b/src/views/TimetableView.vue
index cfc8dc0..c5e6486 100644
--- a/src/views/TimetableView.vue
+++ b/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>