new loading animation

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

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>

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"
     >

src/views/HomeView.vue

@@ -11,18 +11,12 @@ await fetch()
 </script>
 
 <template>
+  <div>
     <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"
+      v-if="isFinished && state.length === 0 && !editModeIsActive"
       class="flex h-1/2 w-full justify-center"
     >
       <div
@@ -43,4 +37,5 @@ await fetch()
         <CreateWishlistTile class="m-4" />
       </router-link>
     </div>
+  </div>
 </template>