fix(gui): switching between tabs or closing tab performance issue

- Use a better approach to pass cell(td) element to attachment component

Signed-off-by: Pranav C <[email protected]>

packages/nc-gui/components/cell/attachment/index.vue

@@ -4,13 +4,13 @@ import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import {
   ActiveCellInj,
+  CurrentCellInj,
   DropZoneRef,
   IsGalleryInj,
   IsKanbanInj,
   iconMap,
   inject,
   isImage,
-  nextTick,
   ref,
   useAttachment,
   useDropZone,
@@ -43,9 +43,9 @@ const attachmentCellRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const currentCellRef = ref<Element | undefined>(dropZoneInjection.value)
+const currentCellRef = inject(CurrentCellInj, dropZoneInjection.value)
 
-const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()!
+const { isSharedForm } = useSmartsheetStoreOrThrow()!
 
 const { getPossibleAttachmentSrc, openAttachment } = useAttachment()
 
@@ -65,32 +65,6 @@ const {
   storedFiles,
 } = useProvideAttachmentCell(updateModelValue)
 
-watch(
-  [() => rowIndex, isForm, attachmentCellRef],
-  () => {
-    if (dropZoneInjection?.value) return
-
-    if (!rowIndex && (isForm.value || isGallery.value || isKanban.value)) {
-      currentCellRef.value = attachmentCellRef.value
-    } else {
-      nextTick(() => {
-        const nextCell = cellRefs.value.reduceRight((cell, curr) => {
-          if (!cell && curr.dataset.key === `${rowIndex}${column.value!.id}`) cell = curr
-
-          return cell
-        }, undefined as HTMLTableDataCellElement | undefined)
-
-        if (!nextCell) {
-          currentCellRef.value = attachmentCellRef.value
-        } else {
-          currentCellRef.value = nextCell
-        }
-      })
-    }
-  },
-  { immediate: true, flush: 'post' },
-)
-
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
 const { state: rowState } = useSmartsheetRowStoreOrThrow()

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

@@ -1,24 +1,13 @@
 <script lang="ts" setup>
-import { CellClickHookInj, createEventHook, onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
-
-const { cellRefs } = useSmartsheetStoreOrThrow()
+import { CellClickHookInj, CurrentCellInj, createEventHook, ref } from '#imports'
 
 const el = ref<HTMLTableDataCellElement>()
 
 const cellClickHook = createEventHook()
 
 provide(CellClickHookInj, cellClickHook)
 
-onMounted(() => {
-  cellRefs.value.push(el.value!)
-})
-
-onBeforeUnmount(() => {
-  const index = cellRefs.value.indexOf(el.value!)
-  if (index > -1) {
-    cellRefs.value.splice(index, 1)
-  }
-})
+provide(CurrentCellInj, el)
 </script>
 
 <template>

packages/nc-gui/composables/useSmartsheetStore.ts

@@ -32,8 +32,6 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       (meta.value as TableType)?.base_id ? sqlUis.value[(meta.value as TableType).base_id!] : Object.values(sqlUis.value)[0],
     )
 
-    const cellRefs = ref<HTMLTableDataCellElement[]>([])
-
     const { search } = useFieldQuery()
 
     const eventBus = useEventBus<SmartsheetStoreEvents>(Symbol('SmartsheetStore'))
@@ -78,7 +76,6 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       isGallery,
       isKanban,
       isMap,
-      cellRefs,
       isSharedForm,
       sorts,
       nestedFilters,

packages/nc-gui/composables/useViewData.ts

@@ -213,7 +213,7 @@ export function useViewData(
     }
 
     if (viewMeta.value?.type === ViewTypes.GRID) {
-      await loadAggCommentsCount()
+      loadAggCommentsCount()
     }
   }
 

packages/nc-gui/context/index.ts

@@ -36,3 +36,4 @@ export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-
 export const ToggleDialogInj: InjectionKey<Function> = Symbol('toggle-dialog-injection')
 export const CellClickHookInj: InjectionKey<EventHook<MouseEvent> | undefined> = Symbol('cell-click-injection')
 export const SaveRowInj: InjectionKey<(() => void) | undefined> = Symbol('save-row-injection')
+export const CurrentCellInj: InjectionKey<Ref<Element | undefined>> = Symbol('current-cell-injection')