nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(categories): add skeleton for categories loading

Browse Source
This commit is contained in:
Nikita Kiselev
2025-09-24 17:31:45 +03:00
parent 0f04cbf105
commit 294e0cd17e
3 changed files with 38 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
spa/src/main.js
View File

@@ -52,7 +52,6 @@ settings.load()
console.log('Load front page categories and products.');
const categoriesStore = useCategoriesStore();
categoriesStore.fetchTopCategories();
categoriesStore.fetchCategories();
})
.then(() => new AppMetaInitializer(settings).init())
.then(() => { appLoading.unmount(); app.mount('#app'); })

4
spa/src/stores/CategoriesStore.js
View File

@@ -6,15 +6,17 @@ export const useCategoriesStore = defineStore('categories', {
topCategories: [],
categories: [],
isLoading: false,
isCategoriesLoaded: false,
}),
actions: {
async fetchCategories() {
if (this.isLoading === false && this.categories.length === 0) {
if (this.isCategoriesLoaded === false && this.categories.length === 0) {
try {
this.isLoading = true;
const {data} = await ftch('categoriesList');
this.categories = data;
this.isCategoriesLoaded = true;
} catch (error) {
console.error(error);
} finally {

60
spa/src/views/CategoriesList.vue
View File

@@ -2,32 +2,42 @@
<div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5 safe-top">
<h2 class="text-3xl mb-5">Категории</h2>
<button v-if="parentId && parentCategory" class="py-2 px-4 flex items-center mb-3 cursor-pointer" @click="goBack">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 min-w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
</svg>
<span class="ml-2 line-clamp-2">Назад к "{{ parentCategory.name }}"</span>
</button>
<button
v-if="parentId"
class="py-2 px-4 flex items-center mb-3 cursor-pointer"
@click.prevent="showProductsInParentCategory"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
</svg>
<span class="ml-2">Показать все товары</span>
</button>
<div v-for="category in categories" :key="category.id">
<CategoryItem
:category="category"
@onSelect="onSelect"
/>
<div v-if="categoriesStore.isLoading" class="flex flex-col gap-4">
<div class="skeleton h-14 w-full"></div>
<div class="skeleton h-14 w-full"></div>
<div class="skeleton h-14 w-full"></div>
<div class="skeleton h-14 w-full"></div>
<div class="skeleton h-14 w-full"></div>
</div>
<template v-else>
<button v-if="parentId && parentCategory" class="py-2 px-4 flex items-center mb-3 cursor-pointer" @click="goBack">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 min-w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
</svg>
<span class="ml-2 line-clamp-2">Назад к "{{ parentCategory.name }}"</span>
</button>
<button
v-if="parentId"
class="py-2 px-4 flex items-center mb-3 cursor-pointer"
@click.prevent="showProductsInParentCategory"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
</svg>
<span class="ml-2">Показать все товары</span>
</button>
<div v-for="category in categories" :key="category.id">
<CategoryItem
:category="category"
@onSelect="onSelect"
/>
</div>
</template>
</div>
</template>