fix(theme): fix flashing category page

packages/theme/pages/Category.vue

@@ -39,7 +39,7 @@
               :value="sortBy.selected"
               placeholder="Select sorting"
               class="navbar__select"
-              @input="th.changeSorting"
+              @input="uiHelpers.changeSorting"
             >
               <SfSelectOption
                 v-for="option in sortBy.options"
@@ -96,11 +96,11 @@
         </LazyHydrate>
       </div>
       <SfLoader
-        :class="{ loading }"
-        :loading="loading"
+        :class="{ loading: isProductsLoading }"
+        :loading="isProductsLoading"
       >
         <div
-          v-if="!loading"
+          v-if="!isProductsLoading"
           class="products"
         >
           <transition-group
@@ -196,7 +196,7 @@
 
           <LazyHydrate on-interaction>
             <SfPagination
-              v-if="!loading"
+              v-if="!isProductsLoading"
               v-show="pagination.totalPages > 1"
               class="products__pagination desktop-only"
               :current="pagination.currentPage"
@@ -214,7 +214,7 @@
               <SfSelect
                 :value="pagination.itemsPerPage.toString()"
                 class="products__items-per-page"
-                @input="th.changeItemsPerPage"
+                @input="uiHelpers.changeItemsPerPage"
               >
                 <SfSelectOption
                   v-for="option in pagination.pageOptions"
@@ -250,7 +250,7 @@
               class="filters__title sf-heading--left"
             />
             <div
-              v-if="isFacetColor(facet)"
+              v-if="uiHelpers.isFacetColor(facet)"
               :key="`${facet.id}-colors`"
               class="filters__colors"
             >
@@ -396,7 +396,7 @@ export default defineComponent({
   }),
   transition: 'fade',
   setup() {
-    const th = useUiHelpers();
+    const uiHelpers = useUiHelpers();
     const uiState = useUiState();
     const {
       path,
@@ -414,17 +414,11 @@ export default defineComponent({
     const {
       result,
       search,
-      loading,
     } = useFacet(`facetId:${path}`);
-    const {
-      changeFilters,
-      isFacetColor,
-    } = useUiHelpers();
     const { toggleFilterSidebar } = useUiState();
     const {
       categories,
       search: categoriesSearch,
-      loading: categoriesLoading,
     } = useCategory(`categoryList:${path}`);
     const {
       addItemToCart,
@@ -518,7 +512,7 @@ export default defineComponent({
         selectedFilters.value = filters;
       }
 
-      changeFilters(selectedFilters.value);
+      uiHelpers.changeFilters(selectedFilters.value);
     };
 
     const addItemToWishlist = async (product) => {
@@ -534,12 +528,14 @@ export default defineComponent({
         ? activeCategoryUid(routeData.value?.entity_uid)
         : routeData.value?.entity_uid;
       await search({
-        ...th.getFacetsFromURL(),
+        ...uiHelpers.getFacetsFromURL(),
         categoryId,
       });
     };
 
+    const isProductsLoading = ref(false);
     onSSR(async () => {
+      isProductsLoading.value = true;
       await resolveUrl();
 
       await categoriesSearch({
@@ -565,6 +561,7 @@ export default defineComponent({
         }
 
         await searchCategoryProduct();
+        isProductsLoading.value = false;
       }
     });
 
@@ -577,22 +574,20 @@ export default defineComponent({
       applyFilters,
       breadcrumbs,
       categories,
-      categoriesLoading,
       categoryTree,
       facets,
       isAuthenticated,
-      isFacetColor,
       isFilterSelected,
       isInCart,
       isInWishlist,
-      loading,
+      isProductsLoading,
       pagination,
       productGetters,
       products,
       selectedFilters,
       selectFilter,
       sortBy,
-      th,
+      uiHelpers,
     };
   },
 });