feat: add skeleton loaders in category navbar

vuestorefront · Apr 28, 2022 · fe3ed4a · fe3ed4a
1 parent 871b9b3
commit fe3ed4a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/packages/theme/components/SkeletonLoader/index.vue b/packages/theme/components/SkeletonLoader/index.vue
@@ -1,15 +1,13 @@
 <template>
-  <div>
+  <div
+    :class="componentClass"
+    :style="componentStyle"
+  >
     <slot v-if="!isLoading" />
-    <span
-      v-else
-      :class="componentClass"
-      :style="componentStyle"
-    />
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, defineComponent } from '@nuxtjs/composition-api';
 
 export default defineComponent({

diff --git a/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue b/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue
@@ -15,7 +15,15 @@
     </SfButton>
     <div class="navbar__sort">
       <span class="navbar__label desktop-only">{{ $t('Sort by') }}:</span>
+      <SkeletonLoader
+        v-if="isLoading"
+        class="navbar__select"
+        width="220px"
+        height="26px"
+        margin="0"
+      />
       <SfSelect
+        v-else
         :value="sortBy.selected"
         class="navbar__select"
         @input="doChangeSorting"
@@ -32,8 +40,17 @@
     </div>
 
     <div class="navbar__counter">
-      <span class="navbar__label desktop-only">{{ $t('Products found') }}</span>
-      <span class="desktop-only">{{ pagination.totalItems }}</span>
+      <span class="navbar__label desktop-only">{{ $t('Products found') }}: </span>
+      <SkeletonLoader
+        v-if="isLoading"
+        width="15px"
+        height="26px"
+        margin="0"
+      />
+      <span
+        v-else
+        class="desktop-only"
+      >{{ pagination.totalItems }}</span>
       <span class="navbar__label smartphone-only">{{ pagination.totalItems }} {{
         $t('Items')
       }}</span>
@@ -73,9 +90,11 @@ import {
 import SvgImage from '~/components/General/SvgImage.vue';
 import { useUiHelpers, useUiState } from '~/composables';
 import { AgnosticPagination, AgnosticSort } from '~/composables/types';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
 
 export default defineComponent({
   components: {
+    SkeletonLoader,
     SvgImage,
     SfSelect,
     SfButton,
@@ -89,6 +108,10 @@ export default defineComponent({
       type: Object as PropType<AgnosticPagination>,
       required: true,
     },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(_, { emit }) {
     const {

diff --git a/packages/theme/modules/catalog/pages/category.vue b/packages/theme/modules/catalog/pages/category.vue
@@ -30,6 +30,7 @@
           v-if="isShowProducts"
           :sort-by="sortBy"
           :pagination="pagination"
+          :is-loading="$fetchState.pending"
           @reloadProducts="fetch"
         />
         <div class="products">