From 4ec750ee6b9bca9159b9f326d40f412de7e791ef Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Thu, 27 Jan 2022 08:31:56 +0100
Subject: [PATCH] fix(theme): ssr optimization for default layout

---
 packages/theme/components/WishlistSidebar.vue |  8 ++++--
 packages/theme/layouts/default.vue            | 27 +++++++------------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/packages/theme/components/WishlistSidebar.vue b/packages/theme/components/WishlistSidebar.vue
index bab241cdc..b7b2f6c6d 100644
--- a/packages/theme/components/WishlistSidebar.vue
+++ b/packages/theme/components/WishlistSidebar.vue
@@ -155,7 +155,7 @@ import {
   SfCollectedProduct,
   SfLink,
 } from '@storefront-ui/vue';
-import { computed, defineComponent } from '@nuxtjs/composition-api';
+import { computed, defineComponent, onMounted } from '@nuxtjs/composition-api';
 import {
   useWishlist,
   useUser,
@@ -178,7 +178,7 @@ export default defineComponent({
   },
   setup() {
     const { isWishlistSidebarOpen, toggleWishlistSidebar } = useUiState();
-    const { wishlist, removeItem } = useWishlist('GlobalWishlist');
+    const { wishlist, removeItem, load: loadWishlist } = useWishlist('GlobalWishlist');
     const { isAuthenticated } = useUser();
     const products = computed(() => wishlistGetters.getProducts(wishlist.value));
     const totals = computed(() => wishlistGetters.getTotals(wishlist.value));
@@ -189,6 +189,10 @@ export default defineComponent({
 
     const { getMagentoImage, imageSizes } = useImage();
 
+    onMounted(() => {
+      loadWishlist();
+    });
+
     return {
       getAttributes,
       getBundles,
diff --git a/packages/theme/layouts/default.vue b/packages/theme/layouts/default.vue
index 789d863ff..228a569f2 100644
--- a/packages/theme/layouts/default.vue
+++ b/packages/theme/layouts/default.vue
@@ -1,33 +1,24 @@
 <template>
   <div>
     <LazyHydrate when-visible>
-      <TopBar class="desktop-only" />
-    </LazyHydrate>
-
-    <AppHeader />
-
-    <div id="layout">
-      <nuxt :key="route.fullPath" />
-    </div>
-
-    <LazyHydrate when-visible>
-      <BottomNavigation />
-    </LazyHydrate>
-    <LazyHydrate when-idle>
       <CartSidebar />
     </LazyHydrate>
-    <LazyHydrate when-idle>
+    <LazyHydrate when-visible>
       <WishlistSidebar />
     </LazyHydrate>
     <LazyHydrate when-visible>
       <LoginModal />
     </LazyHydrate>
-    <LazyHydrate when-idle>
-      <Notification />
-    </LazyHydrate>
     <LazyHydrate when-visible>
-      <AppFooter />
+      <Notification />
     </LazyHydrate>
+    <TopBar class="desktop-only" />
+    <AppHeader />
+    <div id="layout">
+      <nuxt :key="route.fullPath" />
+    </div>
+    <BottomNavigation />
+    <AppFooter />
   </div>
 </template>