fix issue with late update of data

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

src/App.vue

@@ -11,7 +11,19 @@
             <IconError class="h-4 w-4 fill-red-500" />
             <span>{{ t('errors.generic.text') }}</span>
           </div>
-          <component v-else :is="Component"></component>
+          <suspense v-else>
+            <template #default>
+              <component :is="Component"></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>
+            </template>
+          </suspense>
         </template>
       </router-view>
     </main>
@@ -19,7 +31,6 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useTitle } from '@vueuse/core'
 import { onErrorCaptured, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
@@ -29,8 +40,6 @@ const error = ref()
 onErrorCaptured((e: unknown) => {
   console.error(e)
   error.value = e
-
-  useTitle(t('errors.generic.text'))
   return false
 })
 </script>

src/views/DetailView.vue

@@ -25,7 +25,7 @@ const {
   itemDelete,
   filteredItems,
 } = useWishlistStore()
-fetch(route.params.slug as string)
+await fetch(route.params.slug as string)
 
 const title = computed(() => {
   return state.value?.title
@@ -112,67 +112,58 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
 </script>
 
 <template>
-  <div class="h-full">
+  <div v-if="isFinished" class="h-full">
     <div
-      v-if="!isFinished"
-      class="m-20 flex flex-row content-center items-center justify-center space-x-2"
+      class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
     >
-      <IconSpinner class="h-4 w-4" />
-      <span> {{ t('common.loading.text') }} </span>
+      <ImageTile :image-src="state.imageSrc" class="shrink-0"></ImageTile>
+      <div v-if="!editModeIsActive">
+        <h1 class="mb-2 text-center text-2xl font-bold md:text-left">
+          {{ state.title }}
+        </h1>
+        <p class="text-lg">
+          {{ state.description }}
+        </p>
+      </div>
+      <FormWishlist
+        v-else
+        :wishlist="state"
+        @update="handleUpdateWishlist"
+        @delete="handleDelete"
+      />
     </div>
-    <div v-else-if="state !== undefined" class="h-full">
+
+    <div
+      v-if="!editModeIsActive && filteredItems.length === 0"
+      class="flex h-1/2 w-full justify-center"
+    >
       <div
-        class="flex flex-col items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
+        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"
       >
-        <ImageTile :image-src="state.imageSrc" class="shrink-0"></ImageTile>
-        <div v-if="!editModeIsActive">
-          <h1 class="mb-2 text-center text-2xl font-bold md:text-left">
-            {{ state.title }}
-          </h1>
-          <p class="text-lg">
-            {{ state.description }}
-          </p>
-        </div>
-        <FormWishlist
-          v-else
-          :wishlist="state"
-          @update="handleUpdateWishlist"
-          @delete="handleDelete"
+        <IconNoGift class="h-10 w-10 fill-gray-600/75 dark:fill-white/70" />
+        <span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
+      </div>
+    </div>
+
+    <div v-else class="flex flex-col space-y-14 py-10 md:space-y-8">
+      <FormWishlistItem
+        v-if="editModeIsActive"
+        mode="create"
+        @create="handleCreateItem"
+      />
+      <div v-for="item in filteredItems" :key="item.id">
+        <WishlistItem
+          v-if="!editModeIsActive"
+          :item="item"
+          @bought="handleBought(item)"
         />
-      </div>
-
-      <div
-        v-if="!editModeIsActive && filteredItems.length === 0"
-        class="flex h-1/2 w-full justify-center"
-      >
-        <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"
-        >
-          <IconNoGift class="h-10 w-10 fill-gray-600/75 dark:fill-white/70" />
-          <span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
-        </div>
-      </div>
-
-      <div v-else class="flex flex-col space-y-14 py-10 md:space-y-8">
         <FormWishlistItem
-          v-if="editModeIsActive"
-          mode="create"
-          @create="handleCreateItem"
+          v-else
+          :item="item"
+          mode="update"
+          @update="(updateValues) => handleUpdateItem(item, updateValues)"
+          @delete="handleDeleteItem(item)"
         />
-        <div v-for="item in filteredItems" :key="item.id">
-          <WishlistItem
-            v-if="!editModeIsActive"
-            :item="item"
-            @bought="handleBought(item)"
-          />
-          <FormWishlistItem
-            v-else
-            :item="item"
-            mode="update"
-            @update="(updateValues) => handleUpdateItem(item, updateValues)"
-            @delete="handleDeleteItem(item)"
-          />
-        </div>
       </div>
     </div>
   </div>

src/views/HomeView.vue

@@ -5,7 +5,7 @@ import { useWishlistsStore, useEditMode } from '@/composables'
 const { t } = useI18n()
 const { isActive: editModeIsActive } = useEditMode()
 const { state, isFinished, fetch } = useWishlistsStore()
-fetch()
+await fetch()
 </script>
 
 <template>