From 0a8e3f4143ba8985bac81815bcb98099ad08c3b0 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 29 Jun 2022 09:46:25 +0200
Subject: [PATCH 1/2] perf: category page CLS improvement

---
 .../components/views/CategoryProductGrid.vue  | 22 +++++++++++++-----
 .../components/views/CategoryProductList.vue  | 23 ++++++++++++++-----
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue b/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue
index c2c8f4d85..36dca2499 100644
--- a/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue
+++ b/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue
@@ -102,13 +102,23 @@ export default defineComponent({
   }
 }
 
-::v-deep .sf-product-card__add-button {
-  @include for-mobile {
-    opacity: 1;
-    display: flex;
-    bottom: 1rem;
-    right: 0;
+::v-deep .sf-product-card {
+  &__image-wrapper {
+    height: 257px;
   }
+
+  &__add-button {
+    @include for-mobile {
+      opacity: 1;
+      display: flex;
+      bottom: 1rem;
+      right: 0;
+    }
+  }
+}
+
+::v-deep .sf-product-card::after {
+  content: none;
 }
 
 </style>
diff --git a/packages/theme/modules/catalog/category/components/views/CategoryProductList.vue b/packages/theme/modules/catalog/category/components/views/CategoryProductList.vue
index 8ce15dbee..51d6d10a3 100644
--- a/packages/theme/modules/catalog/category/components/views/CategoryProductList.vue
+++ b/packages/theme/modules/catalog/category/components/views/CategoryProductList.vue
@@ -125,6 +125,7 @@ export default defineComponent({
 @import "./transition.scss";
 
 .list-layout {
+  will-change: transform;
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
@@ -165,13 +166,23 @@ export default defineComponent({
   }
 }
 
-::v-deep .sf-product-card__add-button {
-  @include for-mobile {
-    opacity: 1;
-    display: flex;
-    bottom: 1rem;
-    right: 0;
+::v-deep .sf-product-card {
+  &__image-wrapper {
+    height: 257px;
   }
+
+  &__add-button {
+    @include for-mobile {
+      opacity: 1;
+      display: flex;
+      bottom: 1rem;
+      right: 0;
+    }
+  }
+}
+
+::v-deep .sf-product-card::after {
+  content: none;
 }
 
 </style>

From a56410d2e4adaec7cbfee1bc7fed29405d1ff20c Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 29 Jun 2022 16:10:03 +0200
Subject: [PATCH 2/2] perf: category page CLS improvement - improve title
 loading - improve filters cls and content jumps

---
 .../theme/components/SkeletonLoader/index.vue |  8 ++-
 .../components/filters/CategoryFilters.scss   |  2 +-
 .../components/filters/CategoryFilters.vue    |  6 --
 .../filters/renderer/CheckboxType.vue         | 59 +++++++++--------
 .../components/filters/renderer/RadioType.vue | 63 +++++++++++--------
 .../filters/renderer/SwatchColorType.vue      | 29 ++++++---
 .../components/filters/renderer/YesNoType.vue |  9 ++-
 .../components/views/CategoryProductGrid.vue  |  4 ++
 .../theme/modules/catalog/pages/category.vue  | 15 ++++-
 9 files changed, 120 insertions(+), 75 deletions(-)

diff --git a/packages/theme/components/SkeletonLoader/index.vue b/packages/theme/components/SkeletonLoader/index.vue
index 2c7357f0e..9992e2244 100644
--- a/packages/theme/components/SkeletonLoader/index.vue
+++ b/packages/theme/components/SkeletonLoader/index.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@nuxtjs/composition-api';
+import { computed, defineComponent, ref } from '@nuxtjs/composition-api';
 
 type ComponentStyles = { width?: string, height?: string, borderRadius: string, margin: string };
 
@@ -26,9 +26,11 @@ export default defineComponent({
     },
     width: {
       type: String,
+      default: '',
     },
     height: {
       type: String,
+      default: '',
     },
     margin: {
       type: String,
@@ -50,10 +52,10 @@ export default defineComponent({
       props.animation ? `skeleton--${props.animation}` : null,
     ]);
 
-    const componentStyle = computed<ComponentStyles>(() => ({
+    const componentStyle = ref<ComponentStyles>({
       borderRadius: props.radius,
       margin: props.margin,
-    }));
+    });
 
     if (props.width) {
       componentStyle.value.width = props.width;
diff --git a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss
index 9c5e08f6f..fefb37739 100644
--- a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss
+++ b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss
@@ -1,6 +1,6 @@
 .filters {
   position: relative;
-  &__title {
+  ::v-deep &__title {
     --heading-title-font-size: var(--font-size--xl);
     margin: var(--spacer-xl) 0 var(--spacer-base) 0;
 
diff --git a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
index c172d7248..0f465b3ae 100644
--- a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
+++ b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
@@ -41,12 +41,6 @@
         :key="i"
         data-testid="category-filter"
       >
-        <SfHeading
-          :key="`filter-title-${filter.attribute_code}`"
-          :level="4"
-          :title="filter.label"
-          class="filters__title sf-heading--left"
-        />
         <component
           :is="getFilterConfig(filter.attribute_code).component"
           :filter="filter"
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue
index 04f51d2f5..ff7586894 100644
--- a/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue
@@ -1,41 +1,50 @@
 <template>
-  <component
-    :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
-    max-content-height="6.875rem"
-    :show-text="$t('Show more')"
-    :hide-text="$t('Show less')"
-  >
-    <SfCheckbox
-      v-for="option in filter.options"
-      :key="`${filter.attribute_code}-${option.value}`"
-      :label="option.label"
-      :selected="Boolean(selected(filter.attribute_code, option.value))"
-      class="filters__item"
-      data-testid="category-filter"
-      @change="$emit('selectFilter', option)"
+  <div>
+    <SfHeading
+      :key="`filter-title-${filter.attribute_code}`"
+      :level="4"
+      :title="filter.label"
+      class="filters__title sf-heading--left"
+    />
+    <component
+      :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
+      max-content-height="6.875rem"
+      :show-text="$t('Show more')"
+      :hide-text="$t('Show less')"
     >
-      <template #label="{ label }">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span
-          :class="{ 'display-none': !label }"
-          class="sf-checkbox__label"
-          v-html="$dompurify(label)"
-        />
-      </template>
-    </SfCheckbox>
-  </component>
+      <SfCheckbox
+        v-for="option in filter.options"
+        :key="`${filter.attribute_code}-${option.value}`"
+        :label="option.label"
+        :selected="Boolean(selected(filter.attribute_code, option.value))"
+        class="filters__item"
+        data-testid="category-filter"
+        @change="$emit('selectFilter', option)"
+      >
+        <template #label="{ label }">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span
+            :class="{ 'display-none': !label }"
+            class="sf-checkbox__label"
+            v-html="$dompurify(label)"
+          />
+        </template>
+      </SfCheckbox>
+    </component>
+  </div>
 </template>
 <script lang="ts">
 import {
   computed, defineComponent, inject, PropType,
 } from '@nuxtjs/composition-api';
-import { SfCheckbox, SfScrollable } from '@storefront-ui/vue';
+import { SfCheckbox, SfScrollable, SfHeading } from '@storefront-ui/vue';
 import type { Aggregation } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   components: {
     SfCheckbox,
     SfScrollable,
+    SfHeading,
   },
   props: {
     filter: {
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue
index 9ddc888f0..44149cf1d 100644
--- a/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue
@@ -1,44 +1,53 @@
 <template>
-  <component
-    :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
-    max-content-height="6.875rem"
-    :show-text="$t('Show more')"
-    :hide-text="$t('Show less')"
-  >
-    <SfRadio
-      v-for="option in filter.options"
-      :key="`${filter.attribute_code}-${option.value}`"
-      class="radio-filter"
-      :label="`${option.label}`"
-      :selected="selected(filter.attribute_code, option.value)"
-      :value="option.value"
-      name="filter__price"
-      data-testid="category-filter"
-      @change="$emit('selectFilter', option)"
+  <div>
+    <SfHeading
+      :key="`filter-title-${filter.attribute_code}`"
+      :level="4"
+      :title="filter.label"
+      class="filters__title sf-heading--left"
+    />
+    <component
+      :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
+      max-content-height="6.875rem"
+      :show-text="$t('Show more')"
+      :hide-text="$t('Show less')"
     >
-      <template #label="{ label }">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <span
-          :class="{ 'display-none': !label }"
-          class="sf-radio__label"
-          v-html="$dompurify(label)"
-        />
-      </template>
-    </SfRadio>
-  </component>
+      <SfRadio
+        v-for="option in filter.options"
+        :key="`${filter.attribute_code}-${option.value}`"
+        class="radio-filter"
+        :label="`${option.label}`"
+        :selected="selected(filter.attribute_code, option.value)"
+        :value="option.value"
+        name="filter__price"
+        data-testid="category-filter"
+        @change="$emit('selectFilter', option)"
+      >
+        <template #label="{ label }">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span
+            :class="{ 'display-none': !label }"
+            class="sf-radio__label"
+            v-html="$dompurify(label)"
+          />
+        </template>
+      </SfRadio>
+    </component>
+  </div>
 </template>
 <script lang="ts">
 import {
   computed,
   defineComponent, inject, PropType,
 } from '@nuxtjs/composition-api';
-import { SfRadio, SfScrollable } from '@storefront-ui/vue';
+import { SfRadio, SfScrollable, SfHeading } from '@storefront-ui/vue';
 import type { Aggregation } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   components: {
     SfRadio,
     SfScrollable,
+    SfHeading,
   },
   props: {
     filter: {
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
index ee4d973aa..6c0ec34a1 100644
--- a/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
@@ -1,26 +1,35 @@
 <template>
-  <div class="swatch_color_wrapper">
-    <SfColor
-      v-for="option in filter.options"
-      :key="`${filter.attribute_code}-${option.value}`"
-      :color="option.label"
-      :selected="Boolean(selected(filter.attribute_code, option.value))"
-      class="swatch_color"
-      role="button"
-      @click="$emit('selectFilter', option)"
+  <div>
+    <SfHeading
+      :key="`filter-title-${filter.attribute_code}`"
+      :level="4"
+      :title="filter.label"
+      class="filters__title sf-heading--left"
     />
+    <div class="swatch_color_wrapper">
+      <SfColor
+        v-for="option in filter.options"
+        :key="`${filter.attribute_code}-${option.value}`"
+        :color="option.label"
+        :selected="Boolean(selected(filter.attribute_code, option.value))"
+        class="swatch_color"
+        role="button"
+        @click="$emit('selectFilter', option)"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts">
 import {
   computed, defineComponent, inject, PropType,
 } from '@nuxtjs/composition-api';
-import { SfColor } from '@storefront-ui/vue';
+import { SfColor, SfHeading } from '@storefront-ui/vue';
 import type { Aggregation } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   components: {
     SfColor,
+    SfHeading,
   },
   props: {
     filter: {
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue
index b4ddca00b..fde8d7b7b 100644
--- a/packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue
@@ -1,5 +1,11 @@
 <template>
   <div>
+    <SfHeading
+      :key="`filter-title-${filter.attribute_code}`"
+      :level="4"
+      :title="filter.label"
+      class="filters__title sf-heading--left"
+    />
     <SfRadio
       v-for="option in filter.options"
       :key="`${filter.attribute_code}-${option.value}`"
@@ -18,12 +24,13 @@ import {
   computed,
   defineComponent, inject, PropType, useContext,
 } from '@nuxtjs/composition-api';
-import { SfRadio } from '@storefront-ui/vue';
+import { SfRadio, SfHeading } from '@storefront-ui/vue';
 import type { Aggregation, AggregationOption } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   components: {
     SfRadio,
+    SfHeading,
   },
   props: {
     filter: {
diff --git a/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue b/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue
index 36dca2499..4db8a5e17 100644
--- a/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue
+++ b/packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue
@@ -103,6 +103,10 @@ export default defineComponent({
 }
 
 ::v-deep .sf-product-card {
+  .card {
+    will-change: transform, opacity;
+  }
+
   &__image-wrapper {
     height: 257px;
   }
diff --git a/packages/theme/modules/catalog/pages/category.vue b/packages/theme/modules/catalog/pages/category.vue
index 2515b9608..604f0f8b9 100644
--- a/packages/theme/modules/catalog/pages/category.vue
+++ b/packages/theme/modules/catalog/pages/category.vue
@@ -5,8 +5,14 @@
       :content="cmsContent"
     />
     <CategoryBreadcrumbs />
+    <SkeletonLoader
+      v-if="!activeCategoryName"
+      height="57px"
+      width="200px"
+      margin="0"
+    />
     <SfHeading
-      v-if="isShowProducts"
+      v-else
       :level="2"
       :title="activeCategoryName"
       class="category-title"
@@ -110,6 +116,7 @@ import {
   defineComponent, onMounted, ref, ssrRef, useFetch,
 } from '@nuxtjs/composition-api';
 import { CacheTagPrefix, useCache } from '@vue-storefront/cache';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
 import CategoryPagination from '~/modules/catalog/category/components/pagination/CategoryPagination.vue';
 import {
   useFacet,
@@ -148,6 +155,7 @@ export default defineComponent({
     SfSelect,
     LazyHydrate,
     SfHeading,
+    SkeletonLoader,
   },
   transition: 'fade',
   setup() {
@@ -185,11 +193,14 @@ export default defineComponent({
         : addItemToWishlistBase({ product }));
     };
 
-    const { activeCategory } = useTraverseCategory();
+    const { activeCategory, loadCategoryTree } = useTraverseCategory();
     const activeCategoryName = computed(() => activeCategory.value?.name ?? '');
     const routeData = ref<CategoryTree | null>(null);
 
     const { fetch } = useFetch(async () => {
+      if (!activeCategory.value) {
+        loadCategoryTree();
+      }
       const resolvedUrl = await resolveUrl();
       if (isCategoryTreeRoute(resolvedUrl)) routeData.value = resolvedUrl;