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

51
src/views/HomeView.vue
View file

@ -11,36 +11,31 @@ await fetch()
</script> </script>
<template> <template>
<h1 class="text-semibold text-center text-3xl"> <div>
{{ t('common.app-title.text') }} <h1 class="text-semibold text-center text-3xl">
</h1> {{ t('common.app-title.text') }}
<div </h1>
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 <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> </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> </template>