benny/wishlist-app
1
0
Fork 0
mirror of https://github.com/ThisIsBenny/wishlist-app.git synced 2025-04-19 15:27: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" />
<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>

3
src/views/DetailView.vue
View file

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

51
src/views/HomeView.vue
View file

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