From 0600017e310481bd4183c937ede58284e390b64a Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Thu, 24 Oct 2024 16:46:09 +0200
Subject: [PATCH] Lazy load widgets

---
 domains/grid/components/GridWidget.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/domains/grid/components/GridWidget.vue b/domains/grid/components/GridWidget.vue
index 82676640..91f4cbe5 100644
--- a/domains/grid/components/GridWidget.vue
+++ b/domains/grid/components/GridWidget.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computedAsync } from '@vueuse/core'
+import { computedAsync, useIntersectionObserver } from '@vueuse/core'
 import { z } from 'zod'
 
 import type { LuksoDropdownOnChangeEventDetail } from '@lukso/web-components'
@@ -20,6 +20,8 @@ const { connect } = useBaseProvider()
 const { browserSupportExtension } = useBrowser()
 const dropdownId = `dropdown-${generateItemId()}`
 const isOpen = ref<boolean | undefined>(undefined)
+const targetIsVisible = ref(false)
+const target = ref<HTMLElement | null>(null)
 
 const isAllowToEdit = computed(
   () => canEditGrid.value && !isAddContentWidget.value
@@ -146,11 +148,24 @@ const handleDropdownChange = (
 
 onMounted(() => {
   widgetComponent.value = loadWidgetComponent(props.widget.type)
+
+  setTimeout(() => {
+    useIntersectionObserver(
+      target,
+      ([{ isIntersecting }], _observerElement) => {
+        targetIsVisible.value = targetIsVisible.value || isIntersecting
+      },
+      {
+        rootMargin: '100px', // load margin before target appear in viewport
+      }
+    )
+  }, 1)
 })
 </script>
 
 <template>
   <div
+    ref="target"
     class="group relative flex h-full flex-col rounded-12"
     :class="{
       'border border-neutral-90 bg-neutral-100 shadow-neutral-drop-shadow-1xl':
@@ -266,7 +281,7 @@ onMounted(() => {
 
     <!-- Loaded component based on widget type -->
     <component
-      v-if="widgetComponent"
+      v-if="widgetComponent && targetIsVisible"
       :is="widgetComponent"
       v-bind="widget.properties"
       :widget="widget"