refactor(gui): load the cell only when it is in the viewport

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

packages/nc-gui/components/cell/SingleSelect.vue

@@ -246,10 +246,6 @@ useEventListener(document, 'click', handleClose, true)
 const selectedOpt = computed(() => {
   return options.value.find((o) => o.value === vModel.value)
 })
-
-onMounted(() => {
-  console.log('mounted')
-})
 </script>
 
 <template>

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

@@ -151,10 +151,39 @@ const onContextmenu = (e: MouseEvent) => {
     e.stopPropagation()
   }
 }
+
+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 (entry.isIntersecting) {
+        intersected.value = true
+      }
+    })
+  })
+}
+
+// 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-cell w-full h-full relative"
     :class="[
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
@@ -167,6 +196,7 @@ const onContextmenu = (e: MouseEvent) => {
     @contextmenu="onContextmenu"
   >
     <template v-if="column">
+      <template v-if="intersected">
         <LazyCellTextArea v-if="isTextArea(column)" v-model="vModel" />
         <LazyCellGeoData v-else-if="isGeoData(column)" v-model="vModel" />
         <LazyCellCheckbox v-else-if="isBoolean(column, abstractType)" v-model="vModel" />
@@ -197,6 +227,7 @@ const onContextmenu = (e: MouseEvent) => {
           @dblclick.stop.prevent
         />
       </template>
+    </template>
   </div>
 </template>