From cb6ff532c62e8213d15639478ed75a4e99053e40 Mon Sep 17 00:00:00 2001
From: Filip Sobol <sobol.filip@gmail.com>
Date: Fri, 11 Dec 2020 16:43:33 +0100
Subject: [PATCH 1/8] Reduce Total Blocking Time

---
 packages/boilerplate/theme/package.json       |   8 +-
 packages/core/nuxt-theme-module/package.json  |   3 +-
 .../theme/layouts/default.vue                 |  21 +++-
 .../nuxt-theme-module/theme/pages/Home.vue    | 115 ++++++++++--------
 yarn.lock                                     |   5 +
 5 files changed, 93 insertions(+), 59 deletions(-)

diff --git a/packages/boilerplate/theme/package.json b/packages/boilerplate/theme/package.json
index 793dda7553..ead30d8b2e 100644
--- a/packages/boilerplate/theme/package.json
+++ b/packages/boilerplate/theme/package.json
@@ -11,22 +11,22 @@
     "test": "jest"
   },
   "dependencies": {
+    "@nuxtjs/style-resources": "^1.0.0",
     "@storefront-ui/vue": "^0.9.1",
-    "@vue-storefront/boilerplate-api": "^0.0.1",
     "@vue-storefront/boilerplate": "^0.0.1",
+    "@vue-storefront/boilerplate-api": "^0.0.1",
     "@vue-storefront/nuxt": "0.0.12-lc.16",
     "@vue-storefront/nuxt-theme": "0.0.6-lc.16",
-    "@nuxtjs/style-resources": "^1.0.0",
     "cookie-universal-nuxt": "^2.1.3",
-    "nuxt-i18n": "^6.5.0",
     "core-js": "^2.6.5",
     "nuxt": "^2.13.3",
+    "nuxt-i18n": "^6.5.0",
     "vee-validate": "^3.2.3",
     "vue-scrollto": "^2.17.1"
   },
   "devDependencies": {
-    "@nuxt/typescript-build": "^2.0.0",
     "@nuxt/types": "^0.7.9",
+    "@nuxt/typescript-build": "^2.0.0",
     "@vue/test-utils": "^1.0.0-beta.27",
     "babel-jest": "^24.1.0",
     "jest": "^24.1.0",
diff --git a/packages/core/nuxt-theme-module/package.json b/packages/core/nuxt-theme-module/package.json
index 9c16e06e4d..f980a0693e 100644
--- a/packages/core/nuxt-theme-module/package.json
+++ b/packages/core/nuxt-theme-module/package.json
@@ -16,7 +16,8 @@
     "ejs": "^3.0.2",
     "loglevel": "^1.6.7",
     "ts-loader": "^8.0.3",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-lazy-hydration": "^2.0.0-beta.4"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/core/nuxt-theme-module/theme/layouts/default.vue b/packages/core/nuxt-theme-module/theme/layouts/default.vue
index 3009f78a51..d758bc8a4c 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/default.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/default.vue
@@ -1,11 +1,22 @@
 <template>
   <div>
-    <TopBar class="desktop-only" />
-    <div id="layout" >
+    <LazyHydrate when-visible>
+      <TopBar class="desktop-only" />
+    </LazyHydrate>
+
+    <div id="layout">
       <AppHeader />
+
       <nuxt :key="$route.fullPath"/>
-      <BottomNavigation />
-      <AppFooter />
+
+      <LazyHydrate when-visible>
+        <BottomNavigation />
+      </LazyHydrate>
+
+      <LazyHydrate when-visible>
+        <AppFooter />
+      </LazyHydrate>
+
       <CartSidebar />
       <WishlistSidebar />
       <LoginModal />
@@ -21,11 +32,13 @@ import TopBar from '~/components/TopBar.vue';
 import CartSidebar from '~/components/CartSidebar.vue';
 import WishlistSidebar from '~/components/WishlistSidebar.vue';
 import LoginModal from '~/components/LoginModal.vue';
+import LazyHydrate from 'vue-lazy-hydration';
 // const CartSidebar = () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue')
 // const LoginModal = () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
 
 export default {
   components: {
+    LazyHydrate,
     TopBar,
     AppHeader,
     BottomNavigation,
diff --git a/packages/core/nuxt-theme-module/theme/pages/Home.vue b/packages/core/nuxt-theme-module/theme/pages/Home.vue
index ecb6789677..52b1906f86 100644
--- a/packages/core/nuxt-theme-module/theme/pages/Home.vue
+++ b/packages/core/nuxt-theme-module/theme/pages/Home.vue
@@ -1,57 +1,70 @@
 <template>
   <div id="home">
-    <SfHero class="section">
-      <SfHeroItem
-        v-for="(hero, i) in heroes"
-        :key="i"
-        :title="hero.title"
-        :subtitle="hero.subtitle"
-        :button-text="hero.buttonText"
-        :background="hero.background"
-        :image="hero.image"
-        :class="hero.className"
-      />
-    </SfHero>
-    <SfBannerGrid :banner-grid="1" class="section banner-grid">
-      <template v-for="item in banners" v-slot:[item.slot]>
-        <SfBanner
-          :key="item.slot"
-          :title="item.title"
-          :subtitle="item.subtitle"
-          :description="item.description"
-          :button-text="item.buttonText"
-          :image="item.image"
-          :class="item.class"
+    <LazyHydrate when-idle>
+      <SfHero class="section">
+        <SfHeroItem
+          v-for="(hero, i) in heroes"
+          :key="i"
+          :title="hero.title"
+          :subtitle="hero.subtitle"
+          :button-text="hero.buttonText"
+          :background="hero.background"
+          :image="hero.image"
+          :class="hero.className"
         />
-      </template>
-    </SfBannerGrid>
-    <SfCallToAction
-      title="Subscribe to Newsletters"
-      button-text="Subscribe"
-      description="Be aware of upcoming sales and events. Receive gifts and special offers!"
-      image="/homepage/newsletter.webp"
-      class="call-to-action"
-    />
-    <SfSection title-heading="Best Sellers" class="section">
-      <SfCarousel class="carousel" :settings="{ peek: 16, breakpoints: { 1023: { peek: 0, perView: 2 } } }">
-        <SfCarouselItem class="carousel__item" v-for="(product, i) in products" :key="i">
-          <SfProductCard
-            data-cy="home-url_product"
-            :title="product.title"
-            :image="product.image"
-            :regular-price="product.price.regular"
-            :max-rating="product.rating.max"
-            :score-rating="product.rating.score"
-            :show-add-to-cart-button="true"
-            :is-on-wishlist="product.isOnWishlist"
-            link="/"
-            class="carousel__item__product"
-            @click:wishlist="toggleWishlist(i)"
+      </SfHero>
+    </LazyHydrate>
+
+    <LazyHydrate never>
+      <SfBannerGrid :banner-grid="1" class="section banner-grid">
+        <template v-for="item in banners" v-slot:[item.slot]>
+          <SfBanner
+            :key="item.slot"
+            :title="item.title"
+            :subtitle="item.subtitle"
+            :description="item.description"
+            :button-text="item.buttonText"
+            :image="item.image"
+            :class="item.class"
           />
-        </SfCarouselItem>
-      </SfCarousel>
-    </SfSection>
-    <InstagramFeed />
+        </template>
+      </SfBannerGrid>
+    </LazyHydrate>
+
+    <LazyHydrate never>
+      <SfCallToAction
+        title="Subscribe to Newsletters"
+        button-text="Subscribe"
+        description="Be aware of upcoming sales and events. Receive gifts and special offers!"
+        image="/homepage/newsletter.webp"
+        class="call-to-action"
+      />
+    </LazyHydrate>
+    <LazyHydrate when-visible>
+      <SfSection title-heading="Best Sellers" class="section">
+        <SfCarousel class="carousel" :settings="{ peek: 16, breakpoints: { 1023: { peek: 0, perView: 2 } } }">
+          <SfCarouselItem class="carousel__item" v-for="(product, i) in products" :key="i">
+            <SfProductCard
+              data-cy="home-url_product"
+              :title="product.title"
+              :image="product.image"
+              :regular-price="product.price.regular"
+              :max-rating="product.rating.max"
+              :score-rating="product.rating.score"
+              :show-add-to-cart-button="true"
+              :is-on-wishlist="product.isOnWishlist"
+              link="/"
+              class="carousel__item__product"
+              @click:wishlist="toggleWishlist(i)"
+            />
+          </SfCarouselItem>
+        </SfCarousel>
+      </SfSection>
+    </LazyHydrate>
+
+    <LazyHydrate when-visible>
+      <InstagramFeed />
+    </LazyHydrate>
   </div>
 </template>
 <script>
@@ -66,10 +79,12 @@ import {
   SfBannerGrid
 } from '@storefront-ui/vue';
 import InstagramFeed from '~/components/InstagramFeed.vue';
+import LazyHydrate from 'vue-lazy-hydration';
 
 export default {
   name: 'Home',
   components: {
+    LazyHydrate,
     InstagramFeed,
     SfHero,
     SfBanner,
diff --git a/yarn.lock b/yarn.lock
index 9a33ce20a3..5e36ec432a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15394,6 +15394,11 @@ vue-jest@^4.0.0-0:
     source-map "0.5.6"
     ts-jest "26.x"
 
+vue-lazy-hydration@^2.0.0-beta.4:
+  version "2.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/vue-lazy-hydration/-/vue-lazy-hydration-2.0.0-beta.4.tgz#11e7021a9bac003ea6ed74f132dcd0d025fafc1f"
+  integrity sha512-bhr7AxzrSEPed4cOawIeCxJmR8pglberR78x1zs0886xR+47/EXE9s0Ezss90CPINo8ApzUfA/r+SbNffn+t9w==
+
 vue-loader@^15.7.1, vue-loader@^15.9.5:
   version "15.9.5"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.5.tgz#7a960dc420a3439deaacdda038fdcdbf7c432706"

From d5c0b63f6e8483d564966be5e4874cd71e6f759a Mon Sep 17 00:00:00 2001
From: Filip Sobol <sobol.filip@gmail.com>
Date: Tue, 15 Dec 2020 15:49:12 +0100
Subject: [PATCH 2/8] Improve lazy loading and hydration

---
 packages/boilerplate/theme/nuxt.config.js     |  18 +-
 packages/commercetools/theme/nuxt.config.js   |  19 +-
 .../theme/components/CartSidebar.vue          |   5 +-
 .../theme/components/LoginModal.vue           |   3 +-
 .../theme/components/WishlistSidebar.vue      |   5 +-
 .../theme/layouts/account.vue                 |  19 +-
 .../theme/layouts/default.vue                 |  35 +-
 .../theme/pages/Category.vue                  | 385 ++++++++++--------
 .../nuxt-theme-module/theme/pages/Product.vue | 203 ++++-----
 9 files changed, 375 insertions(+), 317 deletions(-)

diff --git a/packages/boilerplate/theme/nuxt.config.js b/packages/boilerplate/theme/nuxt.config.js
index 738a0a22eb..af12df565f 100644
--- a/packages/boilerplate/theme/nuxt.config.js
+++ b/packages/boilerplate/theme/nuxt.config.js
@@ -10,20 +10,20 @@ export default {
     title: 'Vue Storefront',
     meta: [
       { charset: 'utf-8' },
-      { name: 'viewport',
-        content: 'width=device-width, initial-scale=1' },
-      { hid: 'description',
-        name: 'description',
-        content: process.env.npm_package_description || '' }
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
     ],
     link: [
       { rel: 'icon',
         type: 'image/x-icon',
         href: '/favicon.ico'
-      }, {
-        rel: 'preconnect',
-        href: 'https://fonts.googleapis.com'
-      }, {
+      },
+      {
+        rel: 'preload',
+        href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
+        as: 'style'
+      },
+      {
         rel: 'preconnect',
         href: 'https://fonts.gstatic.com'
       }
diff --git a/packages/commercetools/theme/nuxt.config.js b/packages/commercetools/theme/nuxt.config.js
index c9907acd15..1c4c8a6009 100644
--- a/packages/commercetools/theme/nuxt.config.js
+++ b/packages/commercetools/theme/nuxt.config.js
@@ -10,20 +10,21 @@ export default {
     title: process.env.npm_package_name || '',
     meta: [
       { charset: 'utf-8' },
-      { name: 'viewport',
-        content: 'width=device-width, initial-scale=1' },
-      { hid: 'description',
-        name: 'description',
-        content: process.env.npm_package_description || '' }
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
     ],
     link: [
       { rel: 'icon',
         type: 'image/x-icon',
         href: '/favicon.ico'
-      }, {
-        rel: 'preconnect',
-        href: 'https://fonts.googleapis.com'
-      }, {
+      },
+
+      {
+        rel: 'preload',
+        href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
+        as: 'style'
+      },
+      {
         rel: 'preconnect',
         href: 'https://fonts.gstatic.com'
       }
diff --git a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue
index 8cb0564d81..0378aae69e 100644
--- a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue
+++ b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="cart">
     <SfSidebar
-      :visible="isCartSidebarOpen"
+      :visible="true"
       title="My Cart"
       class="sf-sidebar--right"
       @close="toggleCartSidebar"
@@ -136,7 +136,7 @@ export default {
     SfImage
   },
   setup() {
-    const { isCartSidebarOpen, toggleCartSidebar } = useUiState();
+    const { toggleCartSidebar } = useUiState();
     const { cart, removeFromCart, updateQuantity, loadCart } = useCart();
     const { isAuthenticated } = useUser();
     const products = computed(() => cartGetters.getItems(cart.value));
@@ -152,7 +152,6 @@ export default {
       products,
       removeFromCart,
       updateQuantity,
-      isCartSidebarOpen,
       toggleCartSidebar,
       totals,
       totalItems,
diff --git a/packages/core/nuxt-theme-module/theme/components/LoginModal.vue b/packages/core/nuxt-theme-module/theme/components/LoginModal.vue
index 7b613f713c..f9608336ed 100644
--- a/packages/core/nuxt-theme-module/theme/components/LoginModal.vue
+++ b/packages/core/nuxt-theme-module/theme/components/LoginModal.vue
@@ -1,6 +1,6 @@
 <template>
   <SfModal
-    :visible="isLoginModalOpen"
+    :visible="true"
     class="modal"
     @close="toggleLoginModal"
   >
@@ -203,7 +203,6 @@ export default {
       isLogin,
       createAccount,
       rememberMe,
-      isLoginModalOpen,
       toggleLoginModal,
       handleLogin,
       handleRegister
diff --git a/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue b/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue
index 0a8a3f909e..af4b090e5e 100644
--- a/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue
+++ b/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="wishlist">
     <SfSidebar
-      :visible="isWishlistSidebarOpen"
+      :visible="true"
       :button="false"
       title="My Wishlist"
       @close="toggleWishlistSidebar"
@@ -96,7 +96,7 @@ export default {
     SfCollectedProduct
   },
   setup() {
-    const { isWishlistSidebarOpen, toggleWishlistSidebar } = useUiState();
+    const { toggleWishlistSidebar } = useUiState();
     const { wishlist, removeFromWishlist, loadWishlist } = useWishlist();
     const { isAuthenticated } = useUser();
     const products = computed(() => wishlistGetters.getItems(wishlist.value));
@@ -111,7 +111,6 @@ export default {
       isAuthenticated,
       products,
       removeFromWishlist,
-      isWishlistSidebarOpen,
       toggleWishlistSidebar,
       totals,
       totalItems,
diff --git a/packages/core/nuxt-theme-module/theme/layouts/account.vue b/packages/core/nuxt-theme-module/theme/layouts/account.vue
index 8e2755e7ad..d8a57ac05a 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/account.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/account.vue
@@ -5,8 +5,8 @@
       <AppHeader />
       <nuxt />
       <BottomNavigation />
-      <CartSidebar />
-      <LoginModal />
+      <CartSidebar v-if="isCartSidebarOpen" />
+      <LoginModal v-if="isLoginModalOpen" />
     </div>
   </div>
 </template>
@@ -15,16 +15,23 @@
 import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import TopBar from '~/components/TopBar.vue';
-import CartSidebar from '~/components/CartSidebar.vue';
-import LoginModal from '~/components/LoginModal.vue';
+import { useUiState } from '~/composables';
 
 export default {
   components: {
     TopBar,
     AppHeader,
     BottomNavigation,
-    CartSidebar,
-    LoginModal
+    CartSidebar: () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue'),
+    LoginModal: () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
+  },
+  setup() {
+    const { isCartSidebarOpen, isLoginModalOpen } = useUiState();
+
+    return {
+      isCartSidebarOpen,
+      isLoginModalOpen
+    };
   }
 };
 </script>
diff --git a/packages/core/nuxt-theme-module/theme/layouts/default.vue b/packages/core/nuxt-theme-module/theme/layouts/default.vue
index d758bc8a4c..7386ebf537 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/default.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/default.vue
@@ -5,9 +5,13 @@
     </LazyHydrate>
 
     <div id="layout">
-      <AppHeader />
+      <LazyHydrate when-idle>
+        <AppHeader />
+      </LazyHydrate>
 
-      <nuxt :key="$route.fullPath"/>
+      <LazyHydrate when-idle>
+        <nuxt :key="$route.fullPath"/>
+      </LazyHydrate>
 
       <LazyHydrate when-visible>
         <BottomNavigation />
@@ -17,9 +21,9 @@
         <AppFooter />
       </LazyHydrate>
 
-      <CartSidebar />
-      <WishlistSidebar />
-      <LoginModal />
+      <CartSidebar v-if="isCartSidebarOpen" />
+      <WishlistSidebar v-if="isWishlistSidebarOpen" />
+      <LoginModal v-if="isLoginModalOpen" />
     </div>
   </div>
 </template>
@@ -29,12 +33,8 @@ import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import AppFooter from '~/components/AppFooter.vue';
 import TopBar from '~/components/TopBar.vue';
-import CartSidebar from '~/components/CartSidebar.vue';
-import WishlistSidebar from '~/components/WishlistSidebar.vue';
-import LoginModal from '~/components/LoginModal.vue';
 import LazyHydrate from 'vue-lazy-hydration';
-// const CartSidebar = () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue')
-// const LoginModal = () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
+import { useUiState } from '~/composables';
 
 export default {
   components: {
@@ -43,9 +43,18 @@ export default {
     AppHeader,
     BottomNavigation,
     AppFooter,
-    CartSidebar,
-    WishlistSidebar,
-    LoginModal
+    CartSidebar: () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue'),
+    WishlistSidebar: () => import(/* webpackChunkName: "WishlistSidebar" */ '~/components/WishlistSidebar.vue'),
+    LoginModal: () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
+  },
+  setup() {
+    const { isCartSidebarOpen, isWishlistSidebarOpen, isLoginModalOpen } = useUiState();
+
+    return {
+      isCartSidebarOpen,
+      isWishlistSidebarOpen,
+      isLoginModalOpen
+    };
   }
 };
 </script>
diff --git a/packages/core/nuxt-theme-module/theme/pages/Category.vue b/packages/core/nuxt-theme-module/theme/pages/Category.vue
index 36277c0f4d..7afcd6d3b9 100644
--- a/packages/core/nuxt-theme-module/theme/pages/Category.vue
+++ b/packages/core/nuxt-theme-module/theme/pages/Category.vue
@@ -6,47 +6,60 @@
     />
     <div class="navbar section">
       <div class="navbar__aside desktop-only">
-        <SfHeading :level="3" :title="$t('Categories')" class="navbar__title" />
+        <LazyHydrate never>
+          <SfHeading
+            :level="3"
+            :title="$t('Categories')"
+            class="navbar__title" />
+        </LazyHydrate>
       </div>
+
       <div class="navbar__main">
-        <SfButton
-          class="sf-button--text navbar__filters-button"
-          data-cy="category-btn_filters"
-          aria-label="Filters"
-          @click="toggleFilterSidebar"
-        >
-          <SfIcon
-            size="24px"
-            color="dark-secondary"
-            icon="filter2"
-            class="navbar__filters-icon"
-            data-cy="category-icon_"
-          />
-           {{ $t('Filters') }}
-        </SfButton>
+        <LazyHydrate on-interaction>
+          <SfButton
+            class="sf-button--text navbar__filters-button"
+            data-cy="category-btn_filters"
+            aria-label="Filters"
+            @click="toggleFilterSidebar"
+          >
+            <SfIcon
+              size="24px"
+              color="dark-secondary"
+              icon="filter2"
+              class="navbar__filters-icon"
+              data-cy="category-icon_"
+            />
+            {{ $t('Filters') }}
+          </SfButton>
+        </LazyHydrate>
+
         <div class="navbar__sort desktop-only">
           <span class="navbar__label">{{ $t('Sort by') }}:</span>
-          <SfSelect
-            :value="sortBy.selected"
-            placeholder="Select sorting"
-            data-cy="category-select_sortBy"
-            class="navbar__select"
-            @input="th.changeSorting"
-          >
-            <SfSelectOption
-              v-for="option in sortBy.options"
-              :key="option.id"
-              :value="option.id"
-              class="sort-by__option"
-              >{{ option.value }}</SfSelectOption
+          <LazyHydrate on-interaction>
+            <SfSelect
+              :value="sortBy.selected"
+              placeholder="Select sorting"
+              data-cy="category-select_sortBy"
+              class="navbar__select"
+              @input="th.changeSorting"
             >
-          </SfSelect>
+              <SfSelectOption
+                v-for="option in sortBy.options"
+                :key="option.id"
+                :value="option.id"
+                class="sort-by__option"
+                >{{ option.value }}</SfSelectOption
+              >
+            </SfSelect>
+          </LazyHydrate>
         </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 smartphone-only">{{ pagination.totalItems }} Items</span>
         </div>
+
         <div class="navbar__view">
           <span class="navbar__view-label desktop-only">{{ $t('View') }}</span>
           <SfIcon
@@ -74,63 +87,66 @@
         </div>
       </div>
     </div>
+
     <div class="main section">
       <div class="sidebar desktop-only">
-        <SfLoader
-        :class="{ loading }"
-        :loading="loading">
-          <SfAccordion
-            :open="activeCategory"
-            :show-chevron="true"
-          >
-            <SfAccordionItem
-              v-for="(cat, i) in categoryTree && categoryTree.items"
-              :key="i"
-              :header="cat.label"
+        <LazyHydrate when-idle>
+          <SfLoader
+          :class="{ loading }"
+          :loading="loading">
+            <SfAccordion
+              :open="activeCategory"
+              :show-chevron="true"
             >
-              <template>
-                <SfList class="list">
-                  <SfListItem class="list__item">
-                    <SfMenuItem
-                      :count="cat.count || ''"
-                      :data-cy="`category-link_subcategory_${cat.slug}`"
-                      :label="cat.label"
-                    >
-                      <template #label>
-                        <nuxt-link
-                          :to="localePath(th.getCatLink(cat))"
-                          :class="cat.isCurrent ? 'sidebar--cat-selected' : ''"
-                        >
-                          All
-                        </nuxt-link>
-                      </template>
-                    </SfMenuItem>
-                  </SfListItem>
-                  <SfListItem
-                    class="list__item"
-                    v-for="(subCat, j) in cat.items"
-                    :key="j"
-                  >
-                    <SfMenuItem
-                      :count="subCat.count || ''"
-                      :data-cy="`category-link_subcategory_${subCat.slug}`"
-                      :label="subCat.label"
+              <SfAccordionItem
+                v-for="(cat, i) in categoryTree && categoryTree.items"
+                :key="i"
+                :header="cat.label"
+              >
+                <template>
+                  <SfList class="list">
+                    <SfListItem class="list__item">
+                      <SfMenuItem
+                        :count="cat.count || ''"
+                        :data-cy="`category-link_subcategory_${cat.slug}`"
+                        :label="cat.label"
+                      >
+                        <template #label>
+                          <nuxt-link
+                            :to="localePath(th.getCatLink(cat))"
+                            :class="cat.isCurrent ? 'sidebar--cat-selected' : ''"
+                          >
+                            All
+                          </nuxt-link>
+                        </template>
+                      </SfMenuItem>
+                    </SfListItem>
+                    <SfListItem
+                      class="list__item"
+                      v-for="(subCat, j) in cat.items"
+                      :key="j"
                     >
-                      <template #label="{ label }">
-                        <nuxt-link
-                          :to="localePath(th.getCatLink(subCat))"
-                          :class="subCat.isCurrent ? 'sidebar--cat-selected' : ''"
-                        >
-                          {{ label }}
-                        </nuxt-link>
-                      </template>
-                    </SfMenuItem>
-                  </SfListItem>
-                </SfList>
-              </template>
-            </SfAccordionItem>
-          </SfAccordion>
-        </SfLoader>
+                      <SfMenuItem
+                        :count="subCat.count || ''"
+                        :data-cy="`category-link_subcategory_${subCat.slug}`"
+                        :label="subCat.label"
+                      >
+                        <template #label="{ label }">
+                          <nuxt-link
+                            :to="localePath(th.getCatLink(subCat))"
+                            :class="subCat.isCurrent ? 'sidebar--cat-selected' : ''"
+                          >
+                            {{ label }}
+                          </nuxt-link>
+                        </template>
+                      </SfMenuItem>
+                    </SfListItem>
+                  </SfList>
+                </template>
+              </SfAccordionItem>
+            </SfAccordion>
+          </SfLoader>
+        </LazyHydrate>
       </div>
       <SfLoader :class="{ loading }" :loading="loading">
         <div class="products" v-if="!loading">
@@ -212,113 +228,122 @@
               </template>
             </SfProductCardHorizontal>
           </transition-group>
-          <SfPagination
-            v-if="!loading"
-            data-cy="category-pagination"
-            class="products__pagination desktop-only"
-            v-show="pagination.totalPages > 1"
-            :current="pagination.currentPage"
-            :total="pagination.totalPages"
-            :visible="5"
-          />
+
+          <LazyHydrate on-interaction>
+            <SfPagination
+              v-if="!loading"
+              data-cy="category-pagination"
+              class="products__pagination desktop-only"
+              v-show="pagination.totalPages > 1"
+              :current="pagination.currentPage"
+              :total="pagination.totalPages"
+              :visible="5"
+            />
+          </LazyHydrate>
+
           <div
             v-show="pagination.totalPages > 1"
             class="products__show-on-page"
           >
             <span class="products__show-on-page__label">Show on page:</span>
-            <SfSelect
-              :value="pagination.itemsPerPage"
-              class="products__items-per-page"
-              @input="th.changeItemsPerPage"
-            >
-              <SfSelectOption
-                v-for="option in pagination.pageOptions"
-                :key="option"
-                :value="option"
-                class="products__items-per-page__option"
+            <LazyHydrate on-interaction>
+              <SfSelect
+                :value="pagination.itemsPerPage"
+                class="products__items-per-page"
+                @input="th.changeItemsPerPage"
               >
-                {{ option }}
-              </SfSelectOption>
-            </SfSelect>
+                <SfSelectOption
+                  v-for="option in pagination.pageOptions"
+                  :key="option"
+                  :value="option"
+                  class="products__items-per-page__option"
+                >
+                  {{ option }}
+                </SfSelectOption>
+              </SfSelect>
+            </LazyHydrate>
           </div>
         </div>
       </SfLoader>
     </div>
-    <SfSidebar
-      :visible="isFilterSidebarOpen"
-      title="Filters"
-      class="sidebar-filters"
-      @close="toggleFilterSidebar"
-    >
-      <div class="filters desktop-only">
-        <div v-for="(facet, i) in facets" :key="i">
-          <SfHeading
-            :level="4"
-            :title="facet.label"
-            class="filters__title sf-heading--left"
-            :key="`filter-title-${facet.id}`"
-          />
-            <div
-              v-if="isFacetColor(facet)"
-              class="filters__colors"
-              :key="`${facet.id}-colors`"
-            >
-              <SfColor
-                v-for="option in facet.options"
-                :key="`${facet.id}-${option.value}`"
-                :data-cy="`category-filter_color_${option.value}`"
-                :color="option.value"
-                :selected="isFilterSelected(facet, option)"
-                class="filters__color"
-                @click="() => selectFilter(facet, option)"
-              />
-            </div>
-            <div v-else>
-              <SfFilter
-                v-for="option in facet.options"
-                :key="`${facet.id}-${option.value}`"
-                :data-cy="`category-filter_${facet.id}_${option.value}`"
-                :label="option.id + `${option.count && ` (${option.count})`}`"
-                :selected="isFilterSelected(facet, option)"
-                class="filters__item"
-                @change="() => selectFilter(facet, option)"
-              />
-            </div>
+
+    <LazyHydrate when-visible>
+      <SfSidebar
+        :visible="isFilterSidebarOpen"
+        title="Filters"
+        class="sidebar-filters"
+        @close="toggleFilterSidebar"
+      >
+        <div class="filters desktop-only">
+          <div v-for="(facet, i) in facets" :key="i">
+            <SfHeading
+              :level="4"
+              :title="facet.label"
+              class="filters__title sf-heading--left"
+              :key="`filter-title-${facet.id}`"
+            />
+              <div
+                v-if="isFacetColor(facet)"
+                class="filters__colors"
+                :key="`${facet.id}-colors`"
+              >
+                <SfColor
+                  v-for="option in facet.options"
+                  :key="`${facet.id}-${option.value}`"
+                  :data-cy="`category-filter_color_${option.value}`"
+                  :color="option.value"
+                  :selected="isFilterSelected(facet, option)"
+                  class="filters__color"
+                  @click="() => selectFilter(facet, option)"
+                />
+              </div>
+              <div v-else>
+                <SfFilter
+                  v-for="option in facet.options"
+                  :key="`${facet.id}-${option.value}`"
+                  :data-cy="`category-filter_${facet.id}_${option.value}`"
+                  :label="option.id + `${option.count ? ` (${option.count})` : ''}`"
+                  :selected="isFilterSelected(facet, option)"
+                  class="filters__item"
+                  @change="() => selectFilter(facet, option)"
+                />
+              </div>
+          </div>
         </div>
-      </div>
-      <SfAccordion class="filters smartphone-only">
-        <div v-for="(facet, i) in facets" :key="i">
-          <SfAccordionItem
-            :key="`filter-title-${facet.id}`"
-            :header="facet.label"
-            class="filters__accordion-item"
-          >
-          <SfFilter
-            v-for="option in facet.options"
-            :key="`${facet.id}-${option.id}`"
-            :label="option.id"
-            :selected="isFilterSelected(facet, option)"
-            class="filters__item"
-            @change="() => selectFilter(facet, option)"
-          />
-        </SfAccordionItem>
-      </div>
-      </SfAccordion>
-      <template #content-bottom>
-        <div class="filters__buttons">
-          <SfButton
-            class="sf-button--full-width"
-            @click="applyFilters"
-            >Done</SfButton
-          >
-          <SfButton
-            class="sf-button--full-width filters__button-clear"
-            @click="clearFilters"
-            >Clear all</SfButton
-          >
+        <SfAccordion class="filters smartphone-only">
+          <div v-for="(facet, i) in facets" :key="i">
+            <SfAccordionItem
+              :key="`filter-title-${facet.id}`"
+              :header="facet.label"
+              class="filters__accordion-item"
+            >
+            <SfFilter
+              v-for="option in facet.options"
+              :key="`${facet.id}-${option.id}`"
+              :label="option.id"
+              :selected="isFilterSelected(facet, option)"
+              class="filters__item"
+              @change="() => selectFilter(facet, option)"
+            />
+          </SfAccordionItem>
         </div>
-      </template>
-    </SfSidebar>
+        </SfAccordion>
+        <template #content-bottom>
+          <div class="filters__buttons">
+            <SfButton
+              class="sf-button--full-width"
+              @click="applyFilters"
+              >Done</SfButton
+            >
+            <SfButton
+              class="sf-button--full-width filters__button-clear"
+              @click="clearFilters"
+              >Clear all</SfButton
+            >
+          </div>
+        </template>
+      </SfSidebar>
+    </LazyHydrate>
   </div>
 </template>
 
@@ -345,6 +370,7 @@ import { ref, computed, onMounted } from '@vue/composition-api';
 import { useCart, useWishlist, productGetters, useFacet, facetGetters } from '<%= options.generate.replace.composables %>';
 import { useUiHelpers, useUiState } from '~/composables';
 import { onSSR } from '@vue-storefront/core';
+import LazyHydrate from 'vue-lazy-hydration';
 import Vue from 'vue';
 
 export default {
@@ -458,7 +484,8 @@ export default {
     SfLoader,
     SfColor,
     SfHeading,
-    SfProperty
+    SfProperty,
+    LazyHydrate
   }
 };
 </script>
diff --git a/packages/core/nuxt-theme-module/theme/pages/Product.vue b/packages/core/nuxt-theme-module/theme/pages/Product.vue
index ad9cf4acc0..d46c495d80 100644
--- a/packages/core/nuxt-theme-module/theme/pages/Product.vue
+++ b/packages/core/nuxt-theme-module/theme/pages/Product.vue
@@ -5,7 +5,10 @@
       :breadcrumbs="breadcrumbs"
     />
     <div class="product">
-      <SfGallery :images="productGallery" class="product__gallery" />
+      <LazyHydrate when-idle>
+        <SfGallery :images="productGallery" class="product__gallery" />
+      </LazyHydrate>
+
       <div class="product__info">
         <div class="product__header">
           <SfHeading
@@ -89,100 +92,112 @@
             Add to compare
           </SfButton>
         </div>
-        <SfTabs :open-tab="1" class="product__tabs">
-          <SfTab data-cy="product-tab_description" title="Description">
-            <div class="product__description">
-                The Karissa V-Neck Tee features a semi-fitted shape that's
-                flattering for every figure. You can hit the gym with
-                confidence while it hugs curves and hides common "problem"
-                areas. Find stunning women's cocktail dresses and party
-                dresses.
-            </div>
-            <SfProperty
-              v-for="(property, i) in properties"
-              :key="i"
-              :name="property.name"
-              :value="property.value"
-              class="product__property"
+
+        <LazyHydrate when-idle>
+          <SfTabs :open-tab="1" class="product__tabs">
+            <SfTab data-cy="product-tab_description" title="Description">
+              <div class="product__description">
+                  The Karissa V-Neck Tee features a semi-fitted shape that's
+                  flattering for every figure. You can hit the gym with
+                  confidence while it hugs curves and hides common "problem"
+                  areas. Find stunning women's cocktail dresses and party
+                  dresses.
+              </div>
+              <SfProperty
+                v-for="(property, i) in properties"
+                :key="i"
+                :name="property.name"
+                :value="property.value"
+                class="product__property"
+              >
+                <template v-if="property.name === 'Category'" #value>
+                  <SfButton class="product__property__button sf-button--text">
+                    {{ property.value }}
+                  </SfButton>
+                </template>
+              </SfProperty>
+            </SfTab>
+            <SfTab title="Read reviews" data-cy="product-tab_reviews">
+              <SfReview
+                v-for="review in reviews"
+                :key="reviewGetters.getReviewId(review)"
+                :author="reviewGetters.getReviewAuthor(review)"
+                :date="reviewGetters.getReviewDate(review)"
+                :message="reviewGetters.getReviewMessage(review)"
+                :max-rating="5"
+                :rating="reviewGetters.getReviewRating(review)"
+                :char-limit="250"
+                read-more-text="Read more"
+                hide-full-text="Read less"
+                class="product__review"
+              />
+            </SfTab>
+            <SfTab
+              title="Additional Information"
+              data-cy="product-tab_additional"
+              class="product__additional-info"
             >
-              <template v-if="property.name === 'Category'" #value>
-                <SfButton class="product__property__button sf-button--text">
-                  {{ property.value }}
-                </SfButton>
-              </template>
-            </SfProperty>
-          </SfTab>
-          <SfTab title="Read reviews" data-cy="product-tab_reviews">
-            <SfReview
-              v-for="review in reviews"
-              :key="reviewGetters.getReviewId(review)"
-              :author="reviewGetters.getReviewAuthor(review)"
-              :date="reviewGetters.getReviewDate(review)"
-              :message="reviewGetters.getReviewMessage(review)"
-              :max-rating="5"
-              :rating="reviewGetters.getReviewRating(review)"
-              :char-limit="250"
-              read-more-text="Read more"
-              hide-full-text="Read less"
-              class="product__review"
-            />
-          </SfTab>
-          <SfTab
-            title="Additional Information"
-            data-cy="product-tab_additional"
-            class="product__additional-info"
-          >
-          <div class="product__additional-info">
-            <p class="product__additional-info__title">Brand</p>
-            <p>{{ brand }}</p>
-            <p class="product__additional-info__title">Take care of me</p>
-            <p class="product__additional-info__paragraph">
-              Just here for the care instructions?
-            </p>
-            <p class="product__additional-info__paragraph">
-              Yeah, we thought so
-            </p>
-            <p>{{ careInstructions }}</p>
-          </div>
-          </SfTab>
-        </SfTabs>
+            <div class="product__additional-info">
+              <p class="product__additional-info__title">Brand</p>
+              <p>{{ brand }}</p>
+              <p class="product__additional-info__title">Take care of me</p>
+              <p class="product__additional-info__paragraph">
+                Just here for the care instructions?
+              </p>
+              <p class="product__additional-info__paragraph">
+                Yeah, we thought so
+              </p>
+              <p>{{ careInstructions }}</p>
+            </div>
+            </SfTab>
+          </SfTabs>
+        </LazyHydrate>
       </div>
     </div>
-    <RelatedProducts
-      :products="relatedProducts"
-      :loading="relatedLoading"
-      title="Match it with"
-    />
-    <InstagramFeed />
-    <SfBanner
-      image="/homepage/bannerD.png"
-      subtitle="Fashion to Take Away"
-      title="Download our application to your mobile"
-      class="sf-banner--left desktop-only banner-app"
-    >
-    <template #call-to-action>
-        <div class="banner-app__call-to-action">
-          <SfButton
-            class="banner-app__button"
-            aria-label="Go to Apple Product"
-            @click="() => {}"
-          >
-            <SfImage
-              src="/homepage/apple.png"
-            />
-          </SfButton>
-          <SfButton
-            class="banner-app__button"
-            aria-label="Go to Google Product"
-            @click="() => {}"
-          >
-            <SfImage
-              src="/homepage/google.png"
-            />
-          </SfButton>
-        </div>
-      </template>
-    </SfBanner>
+
+    <LazyHydrate when-visible>
+      <RelatedProducts
+        :products="relatedProducts"
+        :loading="relatedLoading"
+        title="Match it with"
+      />
+    </LazyHydrate>
+
+    <LazyHydrate when-visible>
+      <InstagramFeed />
+    </LazyHydrate>
+
+    <LazyHydrate never>
+      <SfBanner
+        image="/homepage/bannerD.png"
+        subtitle="Fashion to Take Away"
+        title="Download our application to your mobile"
+        class="sf-banner--left desktop-only banner-app"
+      >
+        <template #call-to-action>
+          <div class="banner-app__call-to-action">
+            <SfButton
+              class="banner-app__button"
+              aria-label="Go to Apple Product"
+              @click="() => {}"
+            >
+              <SfImage
+                src="/homepage/apple.png"
+              />
+            </SfButton>
+            <SfButton
+              class="banner-app__button"
+              aria-label="Go to Google Product"
+              @click="() => {}"
+            >
+              <SfImage
+                src="/homepage/google.png"
+              />
+            </SfButton>
+          </div>
+        </template>
+      </SfBanner>
+    </LazyHydrate>
   </div>
 </template>
 <script>
@@ -211,6 +226,7 @@ import RelatedProducts from '~/components/RelatedProducts.vue';
 import { ref, computed } from '@vue/composition-api';
 import { useProduct, useCart, productGetters, useReview, reviewGetters } from '<%= options.generate.replace.composables %>';
 import { onSSR } from '@vue-storefront/core';
+import LazyHydrate from 'vue-lazy-hydration';
 
 export default {
   name: 'Product',
@@ -290,7 +306,8 @@ export default {
     SfBreadcrumbs,
     SfButton,
     InstagramFeed,
-    RelatedProducts
+    RelatedProducts,
+    LazyHydrate
   },
   data() {
     return {

From cc1f41aa61edd2c52e0211121b106fb2ebd49fde Mon Sep 17 00:00:00 2001
From: Filip Sobol <sobol.filip@gmail.com>
Date: Tue, 22 Dec 2020 13:21:02 +0100
Subject: [PATCH 3/8] Update based on feedback

---
 packages/boilerplate/theme/nuxt.config.js     | 11 ++++++++--
 .../theme/components/CartSidebar.vue          |  5 +++--
 .../theme/components/LoginModal.vue           |  3 ++-
 .../theme/components/WishlistSidebar.vue      |  5 +++--
 .../theme/layouts/default.vue                 | 20 ++++---------------
 .../nuxt-theme-module/theme/pages/Home.vue    |  4 ++--
 .../nuxt-theme-module/theme/pages/Product.vue |  2 +-
 yarn.lock                                     |  4 ++--
 8 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/boilerplate/theme/nuxt.config.js b/packages/boilerplate/theme/nuxt.config.js
index af12df565f..d05558add9 100644
--- a/packages/boilerplate/theme/nuxt.config.js
+++ b/packages/boilerplate/theme/nuxt.config.js
@@ -18,14 +18,21 @@ export default {
         type: 'image/x-icon',
         href: '/favicon.ico'
       },
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: 'crossorigin'
+      },
       {
         rel: 'preload',
         href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
         as: 'style'
       },
       {
-        rel: 'preconnect',
-        href: 'https://fonts.gstatic.com'
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
+        media: 'print',
+        onload: 'this.media=\'all\''
       }
     ]
   },
diff --git a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue
index 0378aae69e..8cb0564d81 100644
--- a/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue
+++ b/packages/core/nuxt-theme-module/theme/components/CartSidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="cart">
     <SfSidebar
-      :visible="true"
+      :visible="isCartSidebarOpen"
       title="My Cart"
       class="sf-sidebar--right"
       @close="toggleCartSidebar"
@@ -136,7 +136,7 @@ export default {
     SfImage
   },
   setup() {
-    const { toggleCartSidebar } = useUiState();
+    const { isCartSidebarOpen, toggleCartSidebar } = useUiState();
     const { cart, removeFromCart, updateQuantity, loadCart } = useCart();
     const { isAuthenticated } = useUser();
     const products = computed(() => cartGetters.getItems(cart.value));
@@ -152,6 +152,7 @@ export default {
       products,
       removeFromCart,
       updateQuantity,
+      isCartSidebarOpen,
       toggleCartSidebar,
       totals,
       totalItems,
diff --git a/packages/core/nuxt-theme-module/theme/components/LoginModal.vue b/packages/core/nuxt-theme-module/theme/components/LoginModal.vue
index f9608336ed..7b613f713c 100644
--- a/packages/core/nuxt-theme-module/theme/components/LoginModal.vue
+++ b/packages/core/nuxt-theme-module/theme/components/LoginModal.vue
@@ -1,6 +1,6 @@
 <template>
   <SfModal
-    :visible="true"
+    :visible="isLoginModalOpen"
     class="modal"
     @close="toggleLoginModal"
   >
@@ -203,6 +203,7 @@ export default {
       isLogin,
       createAccount,
       rememberMe,
+      isLoginModalOpen,
       toggleLoginModal,
       handleLogin,
       handleRegister
diff --git a/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue b/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue
index af4b090e5e..0a8a3f909e 100644
--- a/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue
+++ b/packages/core/nuxt-theme-module/theme/components/WishlistSidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="wishlist">
     <SfSidebar
-      :visible="true"
+      :visible="isWishlistSidebarOpen"
       :button="false"
       title="My Wishlist"
       @close="toggleWishlistSidebar"
@@ -96,7 +96,7 @@ export default {
     SfCollectedProduct
   },
   setup() {
-    const { toggleWishlistSidebar } = useUiState();
+    const { isWishlistSidebarOpen, toggleWishlistSidebar } = useUiState();
     const { wishlist, removeFromWishlist, loadWishlist } = useWishlist();
     const { isAuthenticated } = useUser();
     const products = computed(() => wishlistGetters.getItems(wishlist.value));
@@ -111,6 +111,7 @@ export default {
       isAuthenticated,
       products,
       removeFromWishlist,
+      isWishlistSidebarOpen,
       toggleWishlistSidebar,
       totals,
       totalItems,
diff --git a/packages/core/nuxt-theme-module/theme/layouts/default.vue b/packages/core/nuxt-theme-module/theme/layouts/default.vue
index 7386ebf537..8a1e143c18 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/default.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/default.vue
@@ -9,9 +9,7 @@
         <AppHeader />
       </LazyHydrate>
 
-      <LazyHydrate when-idle>
-        <nuxt :key="$route.fullPath"/>
-      </LazyHydrate>
+      <nuxt :key="$route.fullPath"/>
 
       <LazyHydrate when-visible>
         <BottomNavigation />
@@ -21,9 +19,9 @@
         <AppFooter />
       </LazyHydrate>
 
-      <CartSidebar v-if="isCartSidebarOpen" />
-      <WishlistSidebar v-if="isWishlistSidebarOpen" />
-      <LoginModal v-if="isLoginModalOpen" />
+      <CartSidebar />
+      <WishlistSidebar />
+      <LoginModal />
     </div>
   </div>
 </template>
@@ -34,7 +32,6 @@ import BottomNavigation from '~/components/BottomNavigation.vue';
 import AppFooter from '~/components/AppFooter.vue';
 import TopBar from '~/components/TopBar.vue';
 import LazyHydrate from 'vue-lazy-hydration';
-import { useUiState } from '~/composables';
 
 export default {
   components: {
@@ -46,15 +43,6 @@ export default {
     CartSidebar: () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue'),
     WishlistSidebar: () => import(/* webpackChunkName: "WishlistSidebar" */ '~/components/WishlistSidebar.vue'),
     LoginModal: () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
-  },
-  setup() {
-    const { isCartSidebarOpen, isWishlistSidebarOpen, isLoginModalOpen } = useUiState();
-
-    return {
-      isCartSidebarOpen,
-      isWishlistSidebarOpen,
-      isLoginModalOpen
-    };
   }
 };
 </script>
diff --git a/packages/core/nuxt-theme-module/theme/pages/Home.vue b/packages/core/nuxt-theme-module/theme/pages/Home.vue
index 52b1906f86..aa874dd62f 100644
--- a/packages/core/nuxt-theme-module/theme/pages/Home.vue
+++ b/packages/core/nuxt-theme-module/theme/pages/Home.vue
@@ -15,7 +15,7 @@
       </SfHero>
     </LazyHydrate>
 
-    <LazyHydrate never>
+    <LazyHydrate when-visible>
       <SfBannerGrid :banner-grid="1" class="section banner-grid">
         <template v-for="item in banners" v-slot:[item.slot]>
           <SfBanner
@@ -31,7 +31,7 @@
       </SfBannerGrid>
     </LazyHydrate>
 
-    <LazyHydrate never>
+    <LazyHydrate when-visible>
       <SfCallToAction
         title="Subscribe to Newsletters"
         button-text="Subscribe"
diff --git a/packages/core/nuxt-theme-module/theme/pages/Product.vue b/packages/core/nuxt-theme-module/theme/pages/Product.vue
index d46c495d80..c6d6c3d680 100644
--- a/packages/core/nuxt-theme-module/theme/pages/Product.vue
+++ b/packages/core/nuxt-theme-module/theme/pages/Product.vue
@@ -167,7 +167,7 @@
       <InstagramFeed />
     </LazyHydrate>
 
-    <LazyHydrate never>
+    <LazyHydrate when-visible>
       <SfBanner
         image="/homepage/bannerD.png"
         subtitle="Fashion to Take Away"
diff --git a/yarn.lock b/yarn.lock
index 653c691918..2f0db65389 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2240,9 +2240,9 @@
     defu "^3.2.2"
     normalize-path "^3.0.0"
 
-"@nuxtjs/composition-api@git+https://github.com/andrzejewsky/composition-api.git#ssr-ref-concurrent-fix":
+"@nuxtjs/composition-api@https://github.com/andrzejewsky/composition-api.git#ssr-ref-concurrent-fix":
   version "0.16.4"
-  resolved "git+https://github.com/andrzejewsky/composition-api.git#f1908d57a18f18feffcec0fd44de949c5dab65d3"
+  resolved "https://github.com/andrzejewsky/composition-api.git#f1908d57a18f18feffcec0fd44de949c5dab65d3"
   dependencies:
     "@vue/composition-api" "1.0.0-beta.21"
     defu "^3.2.2"

From 057f7e2b36133c94d9649431960227ab907a2cf9 Mon Sep 17 00:00:00 2001
From: Filip Sobol <sobol.filip@gmail.com>
Date: Tue, 22 Dec 2020 13:22:23 +0100
Subject: [PATCH 4/8] Update Google font loading in CT

---
 packages/commercetools/theme/nuxt.config.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/commercetools/theme/nuxt.config.js b/packages/commercetools/theme/nuxt.config.js
index 1c4c8a6009..e042d1dc86 100644
--- a/packages/commercetools/theme/nuxt.config.js
+++ b/packages/commercetools/theme/nuxt.config.js
@@ -18,15 +18,21 @@ export default {
         type: 'image/x-icon',
         href: '/favicon.ico'
       },
-
+      {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: 'crossorigin'
+      },
       {
         rel: 'preload',
         href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
         as: 'style'
       },
       {
-        rel: 'preconnect',
-        href: 'https://fonts.gstatic.com'
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
+        media: 'print',
+        onload: 'this.media=\'all\''
       }
     ],
     script: []

From 9e7f3777931cf257902eec9700ffe96a36bd58d7 Mon Sep 17 00:00:00 2001
From: Filip Sobol <sobol.filip@gmail.com>
Date: Tue, 22 Dec 2020 13:29:41 +0100
Subject: [PATCH 5/8] Dont lazy load sidebars

---
 .../theme/layouts/account.vue                 | 21 +++++++------------
 .../theme/layouts/default.vue                 | 11 ++++++----
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/packages/core/nuxt-theme-module/theme/layouts/account.vue b/packages/core/nuxt-theme-module/theme/layouts/account.vue
index d8a57ac05a..3bbd7756c2 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/account.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/account.vue
@@ -5,33 +5,26 @@
       <AppHeader />
       <nuxt />
       <BottomNavigation />
-      <CartSidebar v-if="isCartSidebarOpen" />
-      <LoginModal v-if="isLoginModalOpen" />
+      <CartSidebar />
+      <LoginModal />
     </div>
   </div>
 </template>
 
 <script>
+import TopBar from '~/components/TopBar.vue';
 import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
-import TopBar from '~/components/TopBar.vue';
-import { useUiState } from '~/composables';
+import CartSidebar from '~/components/CartSidebar.vue';
+import LoginModal from '~/components/LoginModal.vue';
 
 export default {
   components: {
     TopBar,
     AppHeader,
     BottomNavigation,
-    CartSidebar: () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue'),
-    LoginModal: () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
-  },
-  setup() {
-    const { isCartSidebarOpen, isLoginModalOpen } = useUiState();
-
-    return {
-      isCartSidebarOpen,
-      isLoginModalOpen
-    };
+    CartSidebar,
+    LoginModal
   }
 };
 </script>
diff --git a/packages/core/nuxt-theme-module/theme/layouts/default.vue b/packages/core/nuxt-theme-module/theme/layouts/default.vue
index 8a1e143c18..dd95fb6616 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/default.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/default.vue
@@ -27,11 +27,14 @@
 </template>
 
 <script>
+import TopBar from '~/components/TopBar.vue';
 import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import AppFooter from '~/components/AppFooter.vue';
-import TopBar from '~/components/TopBar.vue';
 import LazyHydrate from 'vue-lazy-hydration';
+import CartSidebar from '~/components/CartSidebar.vue';
+import WishlistSidebar from '~/components/WishlistSidebar.vue';
+import LoginModal from '~/components/LoginModal.vue';
 
 export default {
   components: {
@@ -40,9 +43,9 @@ export default {
     AppHeader,
     BottomNavigation,
     AppFooter,
-    CartSidebar: () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue'),
-    WishlistSidebar: () => import(/* webpackChunkName: "WishlistSidebar" */ '~/components/WishlistSidebar.vue'),
-    LoginModal: () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
+    CartSidebar,
+    WishlistSidebar,
+    LoginModal
   }
 };
 </script>

From 8d7db3be7311bd73d89b6e535df9336914944b75 Mon Sep 17 00:00:00 2001
From: Filip Sobol <sobol.filip@gmail.com>
Date: Tue, 22 Dec 2020 13:31:07 +0100
Subject: [PATCH 6/8] Revert import order change

---
 packages/core/nuxt-theme-module/theme/layouts/account.vue | 2 +-
 packages/core/nuxt-theme-module/theme/layouts/default.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/nuxt-theme-module/theme/layouts/account.vue b/packages/core/nuxt-theme-module/theme/layouts/account.vue
index 3bbd7756c2..8e2755e7ad 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/account.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/account.vue
@@ -12,9 +12,9 @@
 </template>
 
 <script>
-import TopBar from '~/components/TopBar.vue';
 import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
+import TopBar from '~/components/TopBar.vue';
 import CartSidebar from '~/components/CartSidebar.vue';
 import LoginModal from '~/components/LoginModal.vue';
 
diff --git a/packages/core/nuxt-theme-module/theme/layouts/default.vue b/packages/core/nuxt-theme-module/theme/layouts/default.vue
index dd95fb6616..0c352a57f6 100644
--- a/packages/core/nuxt-theme-module/theme/layouts/default.vue
+++ b/packages/core/nuxt-theme-module/theme/layouts/default.vue
@@ -27,14 +27,14 @@
 </template>
 
 <script>
-import TopBar from '~/components/TopBar.vue';
 import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
 import AppFooter from '~/components/AppFooter.vue';
-import LazyHydrate from 'vue-lazy-hydration';
+import TopBar from '~/components/TopBar.vue';
 import CartSidebar from '~/components/CartSidebar.vue';
 import WishlistSidebar from '~/components/WishlistSidebar.vue';
 import LoginModal from '~/components/LoginModal.vue';
+import LazyHydrate from 'vue-lazy-hydration';
 
 export default {
   components: {

From e9c56152951141d6f89dcc53280009cfe0ef36a9 Mon Sep 17 00:00:00 2001
From: Filip Sobol <sobol.filip@gmail.com>
Date: Tue, 22 Dec 2020 16:19:38 +0100
Subject: [PATCH 7/8] Import LazyHydrate in Home page

---
 packages/core/nuxt-theme-module/theme/pages/Home.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/core/nuxt-theme-module/theme/pages/Home.vue b/packages/core/nuxt-theme-module/theme/pages/Home.vue
index f88540bc54..554a727d6e 100644
--- a/packages/core/nuxt-theme-module/theme/pages/Home.vue
+++ b/packages/core/nuxt-theme-module/theme/pages/Home.vue
@@ -80,6 +80,7 @@ import {
   SfBannerGrid
 } from '@storefront-ui/vue';
 import InstagramFeed from '~/components/InstagramFeed.vue';
+import LazyHydrate from 'vue-lazy-hydration';
 
 export default {
   name: 'Home',
@@ -92,7 +93,8 @@ export default {
     SfCarousel,
     SfProductCard,
     SfImage,
-    SfBannerGrid
+    SfBannerGrid,
+    LazyHydrate
   },
   data() {
     return {

From 5d2f68b87af90fe1ba9bf9ab1b3988557518d015 Mon Sep 17 00:00:00 2001
From: Filip Sobol <sobol.filip@gmail.com>
Date: Wed, 23 Dec 2020 10:35:10 +0100
Subject: [PATCH 8/8] Update changelog

---
 packages/core/docs/contributing/changelog.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/docs/contributing/changelog.md b/packages/core/docs/contributing/changelog.md
index 00d9444efc..3575bf1495 100644
--- a/packages/core/docs/contributing/changelog.md
+++ b/packages/core/docs/contributing/changelog.md
@@ -7,6 +7,7 @@
 - [BREAKING] composables are always returning one field for the response, removed `totalOrders` and `totalProducts`, `useCartFactory` and `useUserFactory` are returning only composables ([#5330](https://github.com/vuestorefront/vue-storefront/pull/5330))
 - removed `formatPrice` from `useUiHelpers`, replaced by vue18n `$n` function ([#5339](https://github.com/vuestorefront/vue-storefront/pull/5339))
 - updated integration boilerplate to work with refactored names of factories mentioned above ([#5348](https://github.com/DivanteLtd/vue-storefront/pull/5348))
+- optimize loading of fonts and their stylesheets from Google Fonts and introduce lazy hydration to improve performance ([#5326](https://github.com/DivanteLtd/vue-storefront/pull/5326))
 
 ## 2.1.1-rc.1
 - updated version of nuxt composition-api