refactor(gui): implement lazy load option for virtual cells as well

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/smartsheet/Cell.vue

@@ -162,8 +162,11 @@ const elementToObserve = $ref<Element>()
 function initIntersectionObserver() {
   intersectionObserver = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
+      // if the cell is in the viewport, load the cell and disconnect the observer
       if (entry.isIntersecting) {
         intersected.value = true
+        intersectionObserver?.disconnect()
+        intersectionObserver = undefined
       }
     })
   })

packages/nc-gui/components/smartsheet/VirtualCell.vue

@@ -52,15 +52,48 @@ function onNavigate(dir: NavigateDir, e: KeyboardEvent) {
 
   if (!isForm.value) e.stopImmediatePropagation()
 }
+
+const intersected = ref(false)
+
+let intersectionObserver = $ref<IntersectionObserver>()
+
+const elementToObserve = $ref<Element>()
+
+// load the cell only when it is in the viewport
+function initIntersectionObserver() {
+  intersectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      // if the cell is in the viewport, load the cell and disconnect the observer
+      if (entry.isIntersecting) {
+        intersected.value = true
+        intersectionObserver?.disconnect()
+        intersectionObserver = undefined
+      }
+    })
+  })
+}
+
+// observe the cell when it is mounted
+onMounted(() => {
+  initIntersectionObserver()
+  intersectionObserver?.observe(elementToObserve!)
+})
+
+// disconnect the observer when the cell is unmounted
+onUnmounted(() => {
+  intersectionObserver?.disconnect()
+})
 </script>
 
 <template>
   <div
+    ref="elementToObserve"
     class="nc-virtual-cell w-full flex items-center"
     :class="{ 'text-right justify-end': isGrid && !isForm && isRollup(column) }"
     @keydown.enter.exact="onNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="onNavigate(NavigateDir.PREV, $event)"
   >
+    <template v-if="intersected">
       <LazyVirtualCellHasMany v-if="isHm(column)" />
       <LazyVirtualCellManyToMany v-else-if="isMm(column)" />
       <LazyVirtualCellBelongsTo v-else-if="isBt(column)" />
@@ -70,5 +103,6 @@ function onNavigate(dir: NavigateDir, e: KeyboardEvent) {
       <LazyVirtualCellBarcode v-else-if="isBarcode(column)" />
       <LazyVirtualCellCount v-else-if="isCount(column)" />
       <LazyVirtualCellLookup v-else-if="isLookup(column)" />
+    </template>
   </div>
 </template>