fix: belongs to loading screen

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

@@ -124,11 +124,8 @@ onKeyStroke('Escape', () => {
   vModel.value = false
 })
 
-const isDataExist = computed(() => {
-  if (childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)) {
-    return true
-  }
-  return false
+const isDataExist = computed<boolean>(() => {
+  return childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)
 })
 </script>
 
@@ -151,8 +148,6 @@ const isDataExist = computed(() => {
       :related-table-title="relatedTableMeta?.title"
       :display-value="row.row[displayValueProp]"
     />
-    <div v-if="!isForm" class="m-4 bg-gray-50 border-gray-50 border-b-2">></div>
-
     <div v-if="!isForm" class="flex mt-2 mb-2 items-center gap-2">
       <div
         class="flex items-center border-1 p-1 rounded-md w-full border-gray-200"
@@ -175,8 +170,7 @@ const isDataExist = computed(() => {
       </div>
     </div>
 
-    <template v-if="isDataExist">
-      <div class="mt-2 mb-2">
+    <div v-if="isDataExist || isChildrenLoading" class="mt-2 mb-2">
       <div
         :class="{
           'h-[420px]': !isForm,
@@ -240,9 +234,8 @@ const isDataExist = computed(() => {
         </template>
       </div>
     </div>
-    </template>
     <div
-      v-if="!isDataExist && !isChildrenLoading"
+      v-else
       :class="{
         'h-[420px]': !isForm,
         'h-[250px]': isForm,

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

@@ -49,6 +49,8 @@ const { addLTARRef, isNew, removeLTARRef, state: rowState } = useSmartsheetRowSt
 
 const isPublic = inject(IsPublicInj, ref(false))
 
+isChildrenExcludedLoading.value = true
+
 const isForm = inject(IsFormInj, ref(false))
 
 const saveRow = inject(SaveRowInj, () => {})
@@ -213,7 +215,7 @@ onKeyStroke('Escape', () => {
       </NcButton>
     </div>
 
-    <template v-if="childrenExcludedList?.pageInfo?.totalRows">
+    <template v-if="childrenExcludedList?.pageInfo?.totalRows || isChildrenExcludedLoading">
       <div class="pb-2 pt-1">
         <div class="h-[420px] overflow-scroll nc-scrollbar-md pr-1 cursor-pointer">
           <template v-if="isChildrenExcludedLoading">
@@ -274,7 +276,10 @@ onKeyStroke('Escape', () => {
         </div>
       </div>
     </template>
-    <div v-else class="py-2 h-[420px] flex flex-col gap-3 items-center justify-center text-gray-500">
+    <div
+      v-if="!isChildrenExcludedLoading && !childrenExcludedList?.pageInfo?.totalRows"
+      class="py-2 h-[420px] flex flex-col gap-3 items-center justify-center text-gray-500"
+    >
       <InboxIcon class="w-16 h-16 mx-auto" />
       <p>
         {{ $t('msg.thereAreNoRecordsInTable') }}