Merge pull request #6615 from nocodb/nc-fix/grid-loader

Nc fix/grid loader

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

@@ -123,7 +123,7 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
-useViewColumns(view, meta, () => reloadViewDataHook.trigger())
+const { isViewColumnsLoading } = useViewColumns(view, meta, () => reloadViewDataHook.trigger())
 
 const { isMobileMode } = useGlobal()
 
@@ -384,11 +384,19 @@ const gridWrapperClass = computed<string>(() => {
   return classes.join(' ')
 })
 
-const dummyDataForLoading = computed(() => {
+const dummyColumnDataForLoading = computed(() => {
+  let length = fields.value?.length ?? 40
+  length = length || 40
+  return Array.from({ length: length + 1 }).map(() => ({}))
+})
+
+const dummyRowDataForLoading = computed(() => {
   return Array.from({ length: 40 }).map(() => ({}))
 })
 
-const showSkeleton = computed(() => disableSkeleton !== true && (isViewDataLoading.value || isPaginationLoading.value))
+const showSkeleton = computed(
+  () => disableSkeleton !== true && (isViewDataLoading.value || isPaginationLoading.value || isViewColumnsLoading.value),
+)
 
 // #Grid
 
@@ -1064,6 +1072,22 @@ onBeforeUnmount(async () => {
 reloadViewDataHook?.on(reloadViewDataHandler)
 openNewRecordFormHook?.on(openNewRecordHandler)
 
+// TODO: Use CSS animations
+const showLoaderAfterDelay = ref(false)
+watch([isViewDataLoading, showSkeleton, isPaginationLoading], () => {
+  if (!isViewDataLoading.value && !showSkeleton.value && !isPaginationLoading.value) {
+    showLoaderAfterDelay.value = false
+
+    return
+  }
+
+  showLoaderAfterDelay.value = false
+
+  setTimeout(() => {
+    showLoaderAfterDelay.value = true
+  }, 500)
+})
+
 // #Watchers
 
 // reset context menu target on hide
@@ -1170,7 +1194,7 @@ const loaderText = computed(() => {
   <div class="flex flex-col" :class="`${headerOnly !== true ? 'h-full w-full' : ''}`">
     <div ref="gridWrapper" class="nc-grid-wrapper min-h-0 flex-1 relative" :class="gridWrapperClass">
       <div
-        v-show="showSkeleton && !isPaginationLoading"
+        v-show="showSkeleton && !isPaginationLoading && showLoaderAfterDelay"
         class="flex items-center justify-center absolute l-0 t-0 w-full h-full z-10 pb-10"
       >
         <div class="flex flex-col justify-center gap-2">
@@ -1194,11 +1218,11 @@ const loaderText = computed(() => {
             @contextmenu="showContextMenu"
           >
             <thead v-show="hideHeader !== true" ref="tableHeadEl">
-              <tr v-if="showSkeleton && isPaginationLoading">
+              <tr v-if="isViewColumnsLoading">
                 <td
-                  v-for="(col, colIndex) of dummyDataForLoading"
+                  v-for="(col, colIndex) of dummyColumnDataForLoading"
                   :key="colIndex"
-                  class="!bg-gray-50 h-full"
+                  class="!bg-gray-50 h-full border-b-1 border-r-1"
                   :class="{ 'min-w-50': colIndex !== 0, 'min-w-21.25': colIndex === 0 }"
                 >
                   <a-skeleton
@@ -1210,7 +1234,7 @@ const loaderText = computed(() => {
                   />
                 </td>
               </tr>
-              <tr v-show="!isPaginationLoading" class="nc-grid-header">
+              <tr v-show="!isViewColumnsLoading" 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">
@@ -1364,10 +1388,11 @@ const loaderText = computed(() => {
             </thead>
             <tbody v-if="headerOnly !== true" ref="tableBodyEl">
               <template v-if="showSkeleton">
-                <tr v-for="(row, rowIndex) of dummyDataForLoading" :key="rowIndex">
+                <tr v-for="(row, rowIndex) of dummyRowDataForLoading" :key="rowIndex">
                   <td
-                    v-for="(col, colIndex) of dummyDataForLoading"
+                    v-for="(col, colIndex) of dummyColumnDataForLoading"
                     :key="colIndex"
+                    class="border-b-1 border-r-1"
                     :class="{ 'min-w-50': colIndex !== 0, 'min-w-21.25': colIndex === 0 }"
                   ></td>
                 </tr>
@@ -1966,4 +1991,11 @@ tbody tr:hover {
 .nc-fill-handle:focus {
   @apply w-[8px] h-[8px] mt-[-5px] ml-[-5px];
 }
+
+:deep(.ant-skeleton-input) {
+  @apply rounded text-gray-100 !bg-gray-100 !bg-opacity-65;
+  animation: slow-show-1 5s ease 5s forwards;
+}
 </style>
+
+<style lang="scss"></style>

packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@@ -345,6 +345,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
                   new: true,
                 },
         }"
+        :row-id="extractPkFromRow(expandedFormRow, relatedTableMeta.columns as ColumnType[])"
         use-meta-fields
       />
     </Suspense>

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -335,6 +335,7 @@ onKeyStroke('Escape', () => {
                   new: true,
                 },
         }"
+        :row-id="extractPkFromRow(expandedFormRow, relatedTableMeta.columns as ColumnType[])"
         :state="newRowState"
         use-meta-fields
       />