From 495ba4431bee46e752600ef69f5fe0bbd24532e5 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Wed, 11 May 2022 13:45:47 +0200
Subject: [PATCH] perf: make PDP instagram feed section loaded when visible
 M2-520

---
 packages/theme/components/utils/LoadWhenVisible.vue | 2 +-
 packages/theme/modules/catalog/pages/product.vue    | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/theme/components/utils/LoadWhenVisible.vue b/packages/theme/components/utils/LoadWhenVisible.vue
index 100ced5f2..a941e33e8 100644
--- a/packages/theme/components/utils/LoadWhenVisible.vue
+++ b/packages/theme/components/utils/LoadWhenVisible.vue
@@ -3,7 +3,7 @@
     <slot v-if="isVisible" />
   </div>
 </template>
-<script>
+<script lang="ts">
 import {
   defineComponent, onMounted, onUnmounted, ref,
 } from '@nuxtjs/composition-api';
diff --git a/packages/theme/modules/catalog/pages/product.vue b/packages/theme/modules/catalog/pages/product.vue
index 82b55df8c..411d3b762 100644
--- a/packages/theme/modules/catalog/pages/product.vue
+++ b/packages/theme/modules/catalog/pages/product.vue
@@ -251,9 +251,9 @@
         </LoadWhenVisible>
       </div>
     </SfLoader>
-    <LazyHydrate when-visible>
+    <LoadWhenVisible>
       <InstagramFeed />
-    </LazyHydrate>
+    </LoadWhenVisible>
     <LoadWhenVisible>
       <MobileStoreBanner />
     </LoadWhenVisible>
@@ -312,7 +312,6 @@ import type { Product } from '~/modules/catalog/product/types';
 import BundleProductSelector from '~/modules/catalog/product/components/BundleProductSelector.vue';
 import GroupedProductSelector from '~/modules/catalog/product/components/GroupedProductSelector.vue';
 import { ProductTypeUnion } from '~/modules/catalog/product/enums/ProductTypeUnion';
-import InstagramFeed from '~/components/InstagramFeed.vue';
 import ProductAddReviewForm from '~/components/ProductAddReviewForm.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
 import HTMLContent from '~/components/HTMLContent.vue';
@@ -331,7 +330,7 @@ export default defineComponent({
     BundleProductSelector,
     GroupedProductSelector,
     HTMLContent,
-    InstagramFeed,
+    InstagramFeed: () => import('~/components/InstagramFeed.vue'),
     LazyHydrate,
     MobileStoreBanner: () => import('~/components/MobileStoreBanner.vue'),
     ProductAddReviewForm,