feat(categories): add skeleton for categories loading

spa/src/main.js

@@ -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'); })

spa/src/stores/CategoriesStore.js

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

spa/src/views/CategoriesList.vue

@@ -2,6 +2,15 @@
   <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>
 
+    <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" />
@@ -28,6 +37,7 @@
             @onSelect="onSelect"
         />
       </div>
+    </template>
   </div>
 </template>