perf: make PDP instagram feed section loaded when visible

M2-520
vuestorefront · May 12, 2022 · 495ba44 · 495ba44
1 parent e66aaec
commit 495ba44
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git 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
@@ -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,