🚸 Show infocard on loading failure

src/components/history-list.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { history } from "../store";
+import { history, loadingFailed } from "../store";
 import { getSubstitutionText } from "../util";
 import { computed } from "vue";
 import dayjs from "dayjs";
 import InfoCard from "./info-card.vue";
-import { ClockIcon, AlarmClockOffIcon } from "lucide-vue-next";
+import { ClockIcon, AlarmClockOffIcon, CloudOffIcon } from "lucide-vue-next";
 
 const props = defineProps({
   date: {
@@ -26,16 +26,25 @@ const chars = {
 <template>
   <InfoCard
     v-show="typeof historyOfDate == 'undefined'"
+    v-if="!loadingFailed"
     :icon="ClockIcon"
     :title="$t('infoCard.titles.loading')"
     :text="$t('infoCard.texts.loading')"
   />
   <InfoCard
     v-show="typeof historyOfDate == 'object' && historyOfDate.length == 0"
+    v-if="!loadingFailed || historyOfDate"
     :icon="AlarmClockOffIcon"
     :title="$t('infoCard.titles.noHistory')"
     :text="$t('infoCard.texts.noHistory')"
   />
+  <InfoCard
+    class="card"
+    v-if="loadingFailed && !historyOfDate"
+    :icon="CloudOffIcon"
+    :title="$t('infoCard.titles.loadingFailed')"
+    :text="$t('infoCard.texts.loadingFailed')"
+  />
   <template v-for="event in historyOfDate" :key="event">
     <div
       class="change"