fix: reuse cell components

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -195,8 +195,6 @@ const isAddNewRecordGridMode = ref(true)
 
 const switchingTab = ref(false)
 
-const showLoading = ref(true)
-
 const isView = false
 
 const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)
@@ -973,7 +971,9 @@ eventBus.on(async (event, payload) => {
   }
 })
 
-async function reloadViewDataHandler(shouldShowLoading: boolean | void) {
+async function reloadViewDataHandler(_shouldShowLoading: boolean | void) {
+  isViewDataLoading.value = true
+
   if (predictedNextColumn.value?.length) {
     const fieldsAvailable = meta.value?.columns?.map((c) => c.title)
     predictedNextColumn.value = predictedNextColumn.value.filter((c) => !fieldsAvailable?.includes(c.title))
@@ -981,11 +981,9 @@ async function reloadViewDataHandler(shouldShowLoading: boolean | void) {
   // save any unsaved data before reload
   await saveOrUpdateRecords()
 
-  // set value if spinner should be hidden
-  showLoading.value = !!shouldShowLoading
   await loadData?.()
-  // reset to default (showing spinner on load)
+
-  showLoading.value = true
+  isViewDataLoading.value = false
 }
 
 useEventListener(scrollWrapper, 'scroll', () => {
@@ -1168,7 +1166,7 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
             @contextmenu="showContextMenu"
           >
             <thead v-show="hideHeader !== true" ref="tableHeadEl">
-              <tr v-if="showSkeleton">
+              <tr v-if="showSkeleton && isPaginationLoading">
                 <td
                   v-for="(col, colIndex) of dummyDataForLoading"
                   :key="colIndex"
@@ -1184,7 +1182,7 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
                   />
                 </td>
               </tr>
-              <tr v-else class="nc-grid-header">
+              <tr v-show="!isPaginationLoading" class="nc-grid-header">
                 <th class="w-[85px] min-w-[85px]" data-testid="grid-id-column" @dblclick="() => {}">
                   <div class="w-full h-full flex pl-5 pr-1 items-center" data-testid="nc-check-all">
                     <template v-if="!readOnly">
@@ -1341,8 +1339,13 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
                   ></td>
                 </tr>
               </template>
-              <template v-else>
+              <LazySmartsheetRow
-                <LazySmartsheetRow v-for="(row, rowIndex) of dataRef" ref="rowRefs" :key="rowIndex" :row="row">
+                v-for="(row, rowIndex) of dataRef"
+                v-show="!showSkeleton"
+                ref="rowRefs"
+                :key="rowIndex"
+                :row="row"
+              >
                 <template #default="{ state }">
                   <tr
                     class="nc-grid-row !xs:h-14"
@@ -1476,7 +1479,6 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
                   </tr>
                 </template>
               </LazySmartsheetRow>
-              </template>
 
               <tr
                 v-if="isAddingEmptyRowAllowed && !isGroupBy"