🚸 Show infocard on loading failure

src/components/substitution-list.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { substitutions } from "../store";
+import { substitutions, loadingFailed } from "../store";
 import { getSubstitutionText, getSubstitutionColor } from "../util";
 import { computed } from "vue";
 import InfoCard from "./info-card.vue";
-import { BellOffIcon, ClockIcon } from "lucide-vue-next";
+import { BellOffIcon, ClockIcon, CloudOffIcon } from "lucide-vue-next";
 
 const props = defineProps({
   date: {
@@ -19,6 +19,7 @@ const substitutionsForDate = computed(() => {
 <template>
   <InfoCard
     v-show="typeof substitutionsForDate == 'undefined'"
+    v-if="!loadingFailed"
     :icon="ClockIcon"
     :title="$t('infoCard.titles.loading')"
     :text="$t('infoCard.texts.loading')"
@@ -28,10 +29,18 @@ const substitutionsForDate = computed(() => {
       typeof substitutionsForDate == 'object' &&
       substitutionsForDate.length == 0
     "
+    v-if="!loadingFailed || substitutionsForDate"
     :icon="BellOffIcon"
     :title="$t('infoCard.titles.noEntries')"
     :text="$t('infoCard.texts.noEntries')"
   />
+  <InfoCard
+    class="card"
+    v-if="loadingFailed && !substitutionsForDate"
+    :icon="CloudOffIcon"
+    :title="$t('infoCard.titles.loadingFailed')"
+    :text="$t('infoCard.texts.loadingFailed')"
+  />
   <template v-for="substitution in substitutionsForDate" :key="substitution">
     <div class="substitution" :style="getSubstitutionColor(substitution)">
       <span class="hour">{{ substitution.lesson }}</span>