benny/wishlist-app
1
0
Fork 0
mirror of https://github.com/ThisIsBenny/wishlist-app.git synced 2025-06-07 05:57:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

new loading animation

Browse source 
Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
This commit is contained in:
Benny Samir Hierl 2022-03-08 22:29:45 +01:00
parent 743f7c0f07
commit f319ee5185
3 changed files with 33 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/App.vue
View file

@ -11,16 +11,17 @@
<IconError class="h-4 w-4 fill-red-500" /> <IconError class="h-4 w-4 fill-red-500" />
<span>{{ t('errors.generic.text') }}</span> <span>{{ t('errors.generic.text') }}</span>
</div> </div>
<suspense v-else> <suspense>
<template #default> <template #default>
<component :is="Component"></component> <component :is="Component" />
</template> </template>
<template #fallback> <template #fallback>
<div <div class="m-20 flex flex-col items-center space-y-3">
class="m-20 flex flex-row content-center items-center justify-center space-x-2" <img
> src="/logo-128.png"
<IconSpinner class="h-4 w-4" /> :alt="t('common.loading.text')"
<span> {{ t('common.loading.text') }} </span> class="motion-safe:animate-pulse"
/>
</div> </div>
</template> </template>
</suspense> </suspense>

3
src/views/DetailView.vue
View file

@ -16,6 +16,7 @@ const { isActive: editModeIsActive } = useEditMode()
const { const {
fetch, fetch,
state, state,
error,
isFinished, isFinished,
updateWishlist, updateWishlist,
deleteWishlist, deleteWishlist,
@ -112,7 +113,7 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
</script> </script>
<template> <template>
<div v-if="isFinished && state !== undefined" class="h-full"> <div v-if="isFinished && !error && state" class="h-full">
<div <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 items-center space-x-0 space-y-2 md:flex-row md:space-x-6 md:space-y-0"
> >

11
src/views/HomeView.vue
View file

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