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,15 +112,7 @@ 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"
-    >
-      <IconSpinner class="h-4 w-4" />
-      <span> {{ t('common.loading.text') }} </span>
-    </div>
-    <div v-else-if="state !== undefined" 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"
     >
@@ -175,5 +167,4 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
       </div>
     </div>
   </div>
-  </div>
 </template>

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>