Skip to content

Commit 0dcdbf1

Browse files
SophaosSophaos
committed
added most skeletons
1 parent 072f80d commit 0dcdbf1

File tree

11 files changed

+203
-52
lines changed

11 files changed

+203
-52
lines changed

‎src/features/animes/views/AnimeListView.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,12 +123,17 @@ defineProps<{}>()
123123
:filterDropdowns="animeDropdowns"
124124
:filterInputs="filterInputs"
125125
name="animes"
126+
:isLoading="isPending || areGenresPending"
126127
/>
127128
<MediaDataComponent
128129
:isLoading="isPending"
129130
:data="animes?.mediaData.data ?? []"
130131
route="anime-detail"
131132
/>
132-
<PaginatorComponent :pagination="animes?.mediaData.pagination" name="animes" />
133+
<PaginatorComponent
134+
:loading="!!animes"
135+
:pagination="animes?.mediaData.pagination"
136+
name="animes"
137+
/>
133138
</div>
134139
</template>

‎src/features/home/ui/HomeRecommendationsComponent.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import type { HomeRecommendation } from '@/shared/data-access/models/homeRecommendation'
33
import PanelComponent from '@/shared/ui/PanelComponent.vue'
4+
import PanelSkeletonComponent from '@/shared/ui/PanelSkeletonComponent.vue'
45
import { scrollToTop } from '@/shared/utils/scrollBehaviour'
56
67
defineProps<{
@@ -71,5 +72,6 @@ defineProps<{
7172
</div>
7273
</div>
7374
</div>
75+
<PanelSkeletonComponent v-else />
7476
</PanelComponent>
7577
</template>

‎src/features/home/ui/HomeReviewsComponent.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import type { Review } from '@/shared/data-access/models/review'
33
import PanelComponent from '@/shared/ui/PanelComponent.vue'
4+
import PanelSkeletonComponent from '@/shared/ui/PanelSkeletonComponent.vue'
45
import { scrollToTop } from '@/shared/utils/scrollBehaviour'
56
67
defineProps<{
@@ -64,5 +65,6 @@ defineProps<{
6465
</div>
6566
</div>
6667
</div>
68+
<PanelSkeletonComponent v-else />
6769
</PanelComponent>
6870
</template>

‎src/features/mangas/views/MangaListView.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,12 +117,17 @@ defineProps<{}>()
117117
:filterDropdowns="mangaDropdowns"
118118
:filterInputs="filterInputs"
119119
name="mangas"
120+
:isLoading="isPending || areGenresPending"
120121
/>
121122
<MediaDataComponent
122123
:isLoading="isPending"
123124
:data="mangas?.mediaData.data ?? []"
124125
route="manga-detail"
125126
/>
126-
<PaginatorComponent :pagination="mangas?.mediaData.pagination" name="mangas" />
127+
<PaginatorComponent
128+
:loading="!!mangas"
129+
:pagination="mangas?.mediaData.pagination"
130+
name="mangas"
131+
/>
127132
</div>
128133
</template>

‎src/features/season/views/SeasonListView.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,20 @@ const { data: seasonFilters, isPending: isSeasonFiltersPending } = useQuery({
9090

9191
<template>
9292
<div class="col-12">
93-
<MediaDataFilterComponent :filterDropdowns="filterDropdowns" name="season" />
93+
<MediaDataFilterComponent
94+
:filterDropdowns="filterDropdowns"
95+
name="season"
96+
:isLoading="isSeasonFiltersPending || isPending"
97+
/>
9498
<MediaDataComponent
9599
:isLoading="isPending"
96100
:data="animes?.mediaData.data ?? []"
97101
route="anime-detail"
98102
/>
99-
<PaginatorComponent :pagination="animes?.mediaData.pagination" name="season" />
103+
<PaginatorComponent
104+
:loading="!!animes"
105+
:pagination="animes?.mediaData.pagination"
106+
name="season"
107+
/>
100108
</div>
101109
</template>

‎src/shared/ui/MainPreviewComponent.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import MainPreviewContentComponent from './MainPreviewContentComponent.vue'
55
import type { Media } from '../data-access/models/media'
66
import { getCurrentSeason } from '../utils/currentSeason'
77
import { scrollToTop } from '@/shared/utils/scrollBehaviour'
8+
import Skeleton from 'primevue/skeleton'
89
910
defineProps<{
1011
header: string
@@ -42,4 +43,43 @@ const currentYear = new Date().getFullYear()
4243
</Carousel>
4344
</Panel>
4445
</div>
46+
47+
<div v-else>
48+
<div class="card">
49+
<div class="flex flex-column border-round border-1 surface-border p-4">
50+
<div class="flex justify-content-between mb-3">
51+
<Skeleton width="10rem" styleClass="mb-2"></Skeleton>
52+
<Skeleton width="3rem" styleClass="mb-1"></Skeleton>
53+
</div>
54+
<div
55+
class="flex flex-column-reverse xl:flex-row lg:flex-row pl-5 gap-3 align-items-start md:align-items-center lg:align-items-center xl:align-items-center"
56+
>
57+
<div class="flex flex-column flex-1 w-full">
58+
<div class="flex flex-column gap-1">
59+
<Skeleton width="10rem" styleClass="mb-2" height="2rem"></Skeleton>
60+
<Skeleton width="11rem" styleClass="mb-2" height="1rem"></Skeleton>
61+
<div class="flex flex-row gap-1 mb-1">
62+
<Skeleton width="3rem" styleClass="mb-2" borderRadius="16px"></Skeleton>
63+
<Skeleton width="2rem" styleClass="mb-2" borderRadius="16px"></Skeleton>
64+
<Skeleton width="2rem" styleClass="mb-2" borderRadius="16px"></Skeleton>
65+
</div>
66+
</div>
67+
<Skeleton width="100%" height="10rem"></Skeleton>
68+
</div>
69+
<div class="flex flex-1 align-items-center justify-content-center">
70+
<Skeleton width="25rem" height="30rem"></Skeleton>
71+
</div>
72+
</div>
73+
<div class="flex flex-row justify-content-center gap-1 mt-5">
74+
<Skeleton width="3rem" styleClass="mb-1"></Skeleton>
75+
<Skeleton width="3rem" styleClass="mb-1"></Skeleton>
76+
<Skeleton width="3rem" styleClass="mb-1"></Skeleton>
77+
<Skeleton width="3rem" styleClass="mb-1"></Skeleton>
78+
<Skeleton width="3rem" styleClass="mb-1"></Skeleton>
79+
<Skeleton width="3rem" styleClass="mb-1"></Skeleton>
80+
<Skeleton width="3rem" styleClass="mb-1"></Skeleton>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
4585
</template>

‎src/shared/ui/MediaDataComponent.vue‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import type { Media } from '../data-access/models/media'
33
import MediaCardComponent from './MediaCardComponent.vue'
4+
import MediaDataSkeletonComponent from './MediaDataSkeletonComponent.vue'
45
56
defineProps<{
67
data: Media[]
@@ -10,8 +11,11 @@ defineProps<{
1011
</script>
1112

1213
<template>
13-
<div v-if="!isLoading">
14-
<div v-if="data.length > 0" class="flex flex-row flex-wrap border-1 surface-border py-2">
14+
<div>
15+
<div
16+
v-if="!isLoading && data.length > 0"
17+
class="flex flex-row flex-wrap border-1 surface-border py-2"
18+
>
1519
<div
1620
v-for="media of data"
1721
:key="media.id"
@@ -20,17 +24,8 @@ defineProps<{
2024
<MediaCardComponent :media="media" class="w-12" :route="route" />
2125
</div>
2226
</div>
23-
<!-- <app-paginator
24-
[pagination]="pagination"
25-
(onPageChange)="handlePageChange($event)"
26-
/> -->
27+
<div v-else>
28+
<MediaDataSkeletonComponent />
29+
</div>
2730
</div>
28-
29-
<!-- <ng-template #empty>
30-
<p class="m-5">There are no avaible items with these settings.</p>
31-
</ng-template>
32-
33-
<ng-template #loading>
34-
<app-skeleton-data-view />
35-
</ng-template> -->
3631
</template>

‎src/shared/ui/MediaDataFilterComponent.vue‎

Lines changed: 53 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import InputText from 'primevue/inputtext'
55
import { useRoute, useRouter } from 'vue-router'
66
import debounce from 'lodash.debounce'
77
import type { DropdownData } from '../data-access/models/dropdownData'
8+
import Skeleton from 'primevue/skeleton'
89
910
const { name } = defineProps<{
1011
filterInputs?: DropdownData[]
1112
filterDropdowns: DropdownData[]
1213
name: string
14+
isLoading: boolean
1315
}>()
1416
1517
const route = useRoute()
@@ -38,43 +40,60 @@ const routeChange = (value: any, filter: any) => {
3840
</script>
3941

4042
<template>
41-
<div class="card surface-card flex flex-row flex-wrap p-4 border-1 surface-border mt-1">
43+
<div>
4244
<div
43-
v-for="filter of filterInputs"
44-
:key="filter.param"
45-
class="flex flex-column gap-2 border-round m-1"
45+
v-if="!isLoading"
46+
class="card surface-card flex flex-row flex-wrap p-4 border-1 surface-border mt-1"
4647
>
47-
<label>{{ filter.label }}</label>
48-
<InputText
49-
:id="filter.label"
50-
type="text"
51-
:value="filter.value"
52-
@update:model-value="handleInputChange($event, filter)"
53-
/>
54-
</div>
48+
<div
49+
v-for="filter of filterInputs"
50+
:key="filter.param"
51+
class="flex flex-column gap-2 border-round m-1"
52+
>
53+
<label>{{ filter.label }}</label>
54+
<InputText
55+
:id="filter.label"
56+
type="text"
57+
:value="filter.value"
58+
@update:model-value="handleInputChange($event, filter)"
59+
/>
60+
</div>
5561

56-
<div
57-
v-for="filter of filterDropdowns"
58-
:key="filter.param"
59-
class="flex flex-column gap-2 border-round m-1"
60-
>
61-
<label>{{ filter.label }}</label>
62-
<MultiSelect
63-
v-if="filter.multi"
64-
:options="filter.options"
65-
v-model="filter.value"
66-
optionLabel="label"
67-
optionValue="value"
68-
@change="handleDropdownChange($event, filter)"
69-
/>
70-
<Dropdown
71-
v-else
72-
:options="filter.options"
73-
v-model="filter.value"
74-
optionLabel="label"
75-
optionValue="value"
76-
@change="handleDropdownChange($event, filter)"
77-
/>
62+
<div
63+
v-for="filter of filterDropdowns"
64+
:key="filter.param"
65+
class="flex flex-column gap-2 border-round m-1"
66+
>
67+
<label>{{ filter.label }}</label>
68+
<MultiSelect
69+
v-if="filter.multi"
70+
:options="filter.options"
71+
v-model="filter.value"
72+
optionLabel="label"
73+
optionValue="value"
74+
@change="handleDropdownChange($event, filter)"
75+
/>
76+
<Dropdown
77+
v-else
78+
:options="filter.options"
79+
v-model="filter.value"
80+
optionLabel="label"
81+
optionValue="value"
82+
@change="handleDropdownChange($event, filter)"
83+
/>
84+
</div>
85+
</div>
86+
<div v-else>
87+
<div class="card flex flex-row flex-wrap p-4 border-1 surface-border mt-1">
88+
<div
89+
v-for="filter of [0, 1, 2, 3]"
90+
:key="filter"
91+
class="flex flex-column gap-2 border-round m-1"
92+
>
93+
<Skeleton width="4rem" styleClass="m-1"></Skeleton>
94+
<Skeleton width="8rem" styleClass="m-1"></Skeleton>
95+
</div>
96+
</div>
7897
</div>
7998
</div>
8099
</template>

‎src/shared/ui/MediaDataSkeletonComponent.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup lang="ts">
2+
import Skeleton from 'primevue/skeleton'
3+
</script>
4+
5+
<template>
6+
<div class="flex flex-row flex-wrap border-1 surface-border py-2">
7+
<div
8+
v-for="anime of [0, 1, 2, 3, 4, 5, 6, 7]"
9+
:key="anime"
10+
class="flex flex-row flex-wrap col-12 sm:col-12 md:col-6 lg:col-4 xl:col-3 p-2"
11+
>
12+
<div class="p-4 flex flex-column h-full border-1 surface-border border-round w-full gap-1">
13+
<div class="flex align-items-center justify-content-center">
14+
<Skeleton width="10rem" styleClass="mb-2"></Skeleton>
15+
</div>
16+
<div class="flex align-items-center justify-content-center">
17+
<Skeleton width="10rem" styleClass="mb-2"></Skeleton>
18+
</div>
19+
<div class="my-1 flex flex-row flex-wrap justify-content-center gap-1">
20+
<Skeleton width="3rem" styleClass="m-1"></Skeleton>
21+
<Skeleton width="3rem" styleClass="m-1"></Skeleton>
22+
<Skeleton width="3rem" styleClass="m-1"></Skeleton>
23+
<Skeleton width="3rem" styleClass="m-1"></Skeleton>
24+
</div>
25+
<div class="flex flex-column xl:flex-row lg:flex-row md:flex-row align-items-center">
26+
<div class="col-6">
27+
<Skeleton width="100%" height="17rem" styleClass="m-1"></Skeleton>
28+
</div>
29+
<div class="col-6">
30+
<Skeleton width="100%" height="17rem" styleClass="m-1"></Skeleton>
31+
</div>
32+
</div>
33+
34+
<div
35+
class="flex align-items-center justify-content-center gap-4 align-items-end h-full my-1"
36+
>
37+
<Skeleton width="5rem" styleClass="mx-1"></Skeleton>
38+
<Skeleton width="5rem" styleClass="mx-1"></Skeleton>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
</template>

‎src/shared/ui/PaginatorComponent.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
import Paginator, { type PageState } from 'primevue/paginator'
33
import type { Pagination } from '@/shared/data-access/models/pagination'
44
import { useRoute, useRouter } from 'vue-router'
5+
import Skeleton from 'primevue/skeleton'
56
const { name } = defineProps<{
67
pagination: Pagination | undefined
78
rowsPerPageOptions?: number[] | undefined
89
name: string
10+
loading: boolean
911
}>()
1012
1113
const route = useRoute()
@@ -22,12 +24,28 @@ const handlePageChange = (event: PageState) => {
2224
<template>
2325
<div class="surface-card">
2426
<Paginator
27+
v-if="loading"
2528
locale="en-US"
2629
@page="handlePageChange($event)"
2730
:first="pagination?.first"
2831
:rows="pagination?.rows"
2932
:totalRecords="pagination?.total"
3033
:rowsPerPageOptions="[8, 16, 24]"
3134
></Paginator>
35+
<div
36+
v-else
37+
class="card flex flex-row p-4 border-1 surface-border mt-1 justify-content-center gap-1"
38+
>
39+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
40+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
41+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
42+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
43+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
44+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
45+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
46+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
47+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
48+
<Skeleton shape="circle" size="2rem" styleClass="mr-2"></Skeleton>
49+
</div>
3250
</div>
3351
</template>

0 commit comments

Comments
 (0)