From f319ee5185f5b5034b230bfe886b764f7f061824 Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Tue, 8 Mar 2022 22:29:45 +0100
Subject: [PATCH] new loading animation

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
---
 src/App.vue              | 15 ++++++------
 src/views/DetailView.vue |  3 ++-
 src/views/HomeView.vue   | 51 ++++++++++++++++++----------------------
 3 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9959740..f436503 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,16 +11,17 @@
             <IconError class="h-4 w-4 fill-red-500" />
             <span>{{ t('errors.generic.text') }}</span>
           </div>
-          <suspense v-else>
+          <suspense>
             <template #default>
-              <component :is="Component"></component>
+              <component :is="Component" />
             </template>
             <template #fallback>
-              <div
-                class="m-20 flex flex-row content-center items-center justify-center space-x-2"
-              >
-                <IconSpinner class="h-4 w-4" />
-                <span> {{ t('common.loading.text') }} </span>
+              <div class="m-20 flex flex-col items-center space-y-3">
+                <img
+                  src="/logo-128.png"
+                  :alt="t('common.loading.text')"
+                  class="motion-safe:animate-pulse"
+                />
               </div>
             </template>
           </suspense>
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 6c9c99d..b48fde1 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -16,6 +16,7 @@ const { isActive: editModeIsActive } = useEditMode()
 const {
   fetch,
   state,
+  error,
   isFinished,
   updateWishlist,
   deleteWishlist,
@@ -112,7 +113,7 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
 </script>
 
 <template>
-  <div v-if="isFinished && state !== undefined" class="h-full">
+  <div v-if="isFinished && !error && state" class="h-full">
     <div
       class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
     >
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 54957ea..80f2491 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -11,36 +11,31 @@ await fetch()
 </script>
 
 <template>
-  <h1 class="text-semibold text-center text-3xl">
-    {{ t('common.app-title.text') }}
-  </h1>
-  <div
-    v-if="!isFinished"
-    class="m-20 flex flex-row content-center items-center justify-center space-x-2"
-  >
-    <IconSpinner class="h-4 w-4" />
-    <span> {{ t('common.loading.text') }} </span>
-  </div>
-  <div
-    v-if="state.length === 0 && !editModeIsActive"
-    class="flex h-1/2 w-full justify-center"
-  >
+  <div>
+    <h1 class="text-semibold text-center text-3xl">
+      {{ t('common.app-title.text') }}
+    </h1>
     <div
-      class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
+      v-if="isFinished && state.length === 0 && !editModeIsActive"
+      class="flex h-1/2 w-full justify-center"
     >
-      <span>{{ t('pages.home-view.main.empty-list.text') }}</span>
+      <div
+        class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
+      >
+        <span>{{ t('pages.home-view.main.empty-list.text') }}</span>
+      </div>
+    </div>
+    <div v-else class="flex flex-row flex-wrap justify-around p-10">
+      <router-link
+        v-for="item in state"
+        :key="item.id"
+        :to="'/' + item.slugUrlText"
+      >
+        <ImageTile :title="item.title" :image-src="item.imageSrc" class="m-4" />
+      </router-link>
+      <router-link v-if="editModeIsActive" to="/create-wishlist">
+        <CreateWishlistTile class="m-4" />
+      </router-link>
     </div>
   </div>
-  <div v-else class="flex flex-row flex-wrap justify-around p-10">
-    <router-link
-      v-for="item in state"
-      :key="item.id"
-      :to="'/' + item.slugUrlText"
-    >
-      <ImageTile :title="item.title" :image-src="item.imageSrc" class="m-4" />
-    </router-link>
-    <router-link v-if="editModeIsActive" to="/create-wishlist">
-      <CreateWishlistTile class="m-4" />
-    </router-link>
-  </div>
 </template>