From 54a9c00fea1d0dc143fe3e7743abfde020d93a67 Mon Sep 17 00:00:00 2001
From: Xeovalyte <gitea@xeovalyte.com>
Date: Mon, 14 Nov 2022 14:21:59 +0100
Subject: [PATCH] added loading icons

---
 frontend/app.vue                                      | 7 +++++--
 frontend/pages/calendar.vue                           | 5 +++--
 frontend/pages/news/index.vue                         | 6 +++++-
 frontend/pages/settings/config/managerelatiecodes.vue | 4 ++++
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/app.vue b/frontend/app.vue
index e87a32b..822f324 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,6 +1,9 @@
 <template>
-    <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
-        Loading
+    <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center">
+        <div>
+          <Icon size="4em" name="ion:load-c" class="animate-spin" />
+          <h2 class="mt-2 font-bold">Loading...</h2>
+        </div>
     </div>
     <div v-else>
         <div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
diff --git a/frontend/pages/calendar.vue b/frontend/pages/calendar.vue
index 77d5008..2ae9901 100644
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -8,8 +8,9 @@
                 </div>
             </div>
         </div>
-        <div v-else>
-            Loading...
+        <div class="w-full flex flex-col justify-center items-center" v-else>
+            <Icon size="2em" name="ion:load-c" class="animate-spin" />
+            <h2 class="mt-2 font-bold">Loading...</h2>
         </div>
     </div>
 </template>
diff --git a/frontend/pages/news/index.vue b/frontend/pages/news/index.vue
index 82ad253..4ec1151 100644
--- a/frontend/pages/news/index.vue
+++ b/frontend/pages/news/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
-        <div class="flex flex-col gap-3">
+        <div v-if="news && news[0]" class="flex flex-col gap-3">
             <NuxtLink to="/news/newmessage" v-if="userData.sendNews" class="item-hover border-dashed border-2 container text-center font-bold text-xl border-neutral-500 mb-3">
                 Nieuw Bericht
             </NuxtLink>
@@ -13,6 +13,10 @@
                 </div>
             </div>
         </div>
+        <div class="w-full flex flex-col justify-center items-center" v-else>
+            <Icon size="2em" name="ion:load-c" class="animate-spin" />
+            <h2 class="mt-2 font-bold">Loading...</h2>
+        </div>
     </div>
 </template>
 
diff --git a/frontend/pages/settings/config/managerelatiecodes.vue b/frontend/pages/settings/config/managerelatiecodes.vue
index d7e3feb..6d3b2a8 100644
--- a/frontend/pages/settings/config/managerelatiecodes.vue
+++ b/frontend/pages/settings/config/managerelatiecodes.vue
@@ -12,6 +12,10 @@
                 <span @click="router.back()" class="hover:underline font-bold w-full text-center sm:w-max sm:ml-auto hover:cursor-pointer">Cancel</span>
             </div>
         </div>
+        <div class="w-full flex flex-col justify-center items-center" v-else>
+            <Icon size="2em" name="ion:load-c" class="animate-spin" />
+            <h2 class="mt-2 font-bold">Loading...</h2>
+        </div>
     </div>
 </template>