fix: exact number of skeltons on initial load

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

@@ -64,6 +64,20 @@ const textVal = computed(() => {
   }
 })
 
+const toatlRecordsLinked = computed(() => {
+  if (isForm?.value) {
+    return state.value?.[colTitle.value]?.length
+  }
+  const parsedValue = +value?.value || 0
+  if (!parsedValue) {
+    return 0
+  } else if (parsedValue === 1) {
+    return 1
+  } else {
+    return parsedValue
+  }
+})
+
 const onAttachRecord = () => {
   childListDlg.value = false
   listItemsDlg.value = true
@@ -121,6 +135,7 @@ const localCellValue = computed<any[]>(() => {
 
     <LazyVirtualCellComponentsListChildItems
       v-model="childListDlg"
+      :items="toatlRecordsLinked"
       :column="relatedTableDisplayColumn"
       :cell-value="localCellValue"
       @attach-record="onAttachRecord"

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

@@ -22,6 +22,7 @@ interface Prop {
   modelValue?: boolean
   cellValue: any
   column: any
+  items: number
 }
 
 const props = defineProps<Prop>()
@@ -135,6 +136,10 @@ onKeyStroke('Escape', () => {
    displayed
  */
 const skeltonCount = computed(() => {
+  if (props.items < 10 && childrenListPagination.page === 1) {
+    return props.items
+  }
+
   if (childrenListCount.value < 10 && childrenListPagination.page === 1) {
     return childrenListCount.value || 10
   }
@@ -146,6 +151,13 @@ const skeltonCount = computed(() => {
   return 10
 })
 
+const totalItemsToShow = computed(() => {
+  if (isChildrenLoading) {
+    return props.items
+  }
+  return childrenListCount.value
+})
+
 const isDataExist = computed<boolean>(() => {
   return childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)
 })
@@ -283,7 +295,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
 
     <div class="flex flex-row justify-between bg-white relative pt-1">
       <div v-if="!isForm" class="flex items-center justify-center px-2 rounded-md text-gray-500 bg-brand-50">
-        {{ childrenListCount || 0 }} {{ $t('objects.records') }} {{ childrenListCount !== 0 ? $t('general.are') : '' }}
+        {{ totalItemsToShow || 0 }} {{ $t('objects.records') }} {{ totalItemsToShow !== 0 ? $t('general.are') : '' }}
         {{ $t('general.linked') }}
       </div>
       <div v-else class="flex items-center justify-center px-2 rounded-md text-gray-500 bg-brand-50">