From 526d406621f0dfe23bf6d929e183f678ba3a70f3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 1 Apr 2023 18:16:03 +0530
Subject: [PATCH] refactor(gui): load the cell only when it is in the viewport

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/SingleSelect.vue   |  4 -
 .../nc-gui/components/smartsheet/Cell.vue     | 89 +++++++++++++------
 2 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index bf67aeeab2..9a67b6cf93 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 946dd62d13..8e22795d73 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/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,35 +196,37 @@ const onContextmenu = (e: MouseEvent) => {
     @contextmenu="onContextmenu"
   >
     <template v-if="column">
-      <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" />
-      <LazyCellAttachment v-else-if="isAttachment(column)" v-model="vModel" :row-index="props.rowIndex" />
-      <LazyCellSingleSelect v-else-if="isSingleSelect(column)" v-model="vModel" :row-index="props.rowIndex" />
-      <LazyCellMultiSelect v-else-if="isMultiSelect(column)" v-model="vModel" :row-index="props.rowIndex" />
-      <LazyCellDatePicker v-else-if="isDate(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
-      <LazyCellYearPicker v-else-if="isYear(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
-      <LazyCellDateTimePicker v-else-if="isDateTime(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
-      <LazyCellTimePicker v-else-if="isTime(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
-      <LazyCellRating v-else-if="isRating(column)" v-model="vModel" />
-      <LazyCellDuration v-else-if="isDuration(column)" v-model="vModel" />
-      <LazyCellEmail v-else-if="isEmail(column)" v-model="vModel" />
-      <LazyCellUrl v-else-if="isURL(column)" v-model="vModel" />
-      <LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" v-model="vModel" />
-      <LazyCellPercent v-else-if="isPercent(column)" v-model="vModel" />
-      <LazyCellCurrency v-else-if="isCurrency(column)" v-model="vModel" @save="emit('save')" />
-      <LazyCellDecimal v-else-if="isDecimal(column)" v-model="vModel" />
-      <LazyCellInteger v-else-if="isInt(column, abstractType)" v-model="vModel" />
-      <LazyCellFloat v-else-if="isFloat(column, abstractType)" v-model="vModel" />
-      <LazyCellText v-else-if="isString(column, abstractType)" v-model="vModel" />
-      <LazyCellJson v-else-if="isJSON(column)" v-model="vModel" />
-      <LazyCellText v-else v-model="vModel" />
-      <div
-        v-if="(isLocked || (isPublic && readOnly && !isForm) || isSystemColumn(column)) && !isAttachment(column)"
-        class="nc-locked-overlay"
-        @click.stop.prevent
-        @dblclick.stop.prevent
-      />
+      <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" />
+        <LazyCellAttachment v-else-if="isAttachment(column)" v-model="vModel" :row-index="props.rowIndex" />
+        <LazyCellSingleSelect v-else-if="isSingleSelect(column)" v-model="vModel" :row-index="props.rowIndex" />
+        <LazyCellMultiSelect v-else-if="isMultiSelect(column)" v-model="vModel" :row-index="props.rowIndex" />
+        <LazyCellDatePicker v-else-if="isDate(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
+        <LazyCellYearPicker v-else-if="isYear(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
+        <LazyCellDateTimePicker v-else-if="isDateTime(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
+        <LazyCellTimePicker v-else-if="isTime(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
+        <LazyCellRating v-else-if="isRating(column)" v-model="vModel" />
+        <LazyCellDuration v-else-if="isDuration(column)" v-model="vModel" />
+        <LazyCellEmail v-else-if="isEmail(column)" v-model="vModel" />
+        <LazyCellUrl v-else-if="isURL(column)" v-model="vModel" />
+        <LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" v-model="vModel" />
+        <LazyCellPercent v-else-if="isPercent(column)" v-model="vModel" />
+        <LazyCellCurrency v-else-if="isCurrency(column)" v-model="vModel" @save="emit('save')" />
+        <LazyCellDecimal v-else-if="isDecimal(column)" v-model="vModel" />
+        <LazyCellInteger v-else-if="isInt(column, abstractType)" v-model="vModel" />
+        <LazyCellFloat v-else-if="isFloat(column, abstractType)" v-model="vModel" />
+        <LazyCellText v-else-if="isString(column, abstractType)" v-model="vModel" />
+        <LazyCellJson v-else-if="isJSON(column)" v-model="vModel" />
+        <LazyCellText v-else v-model="vModel" />
+        <div
+          v-if="(isLocked || (isPublic && readOnly && !isForm) || isSystemColumn(column)) && !isAttachment(column)"
+          class="nc-locked-overlay"
+          @click.stop.prevent
+          @dblclick.stop.prevent
+        />
+      </template>
     </template>
   </div>
 </template>