fix(nc-gui): Update offset of LinkedRecords in accordance with links and unlinks (#7841)

* fix(nc-gui): update links

* fix(nc-gui): update offset

* fix(nc-gui): offset reset

* fix: offset issue

* fix: loading state not working

* fix: tests

* fix: failign tests

* fix: update offset if same or greater than count

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

@@ -121,7 +121,7 @@ watch([listItemsDlg], () => {
       />
     </div>
 
-    <LazyVirtualCellComponentsListItems
+    <LazyVirtualCellComponentsUnLinkedItems
       v-if="listItemsDlg"
       v-model="listItemsDlg"
       :column="belongsToColumn"

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

@@ -132,9 +132,9 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
       />
     </div>
 
-    <LazyVirtualCellComponentsListItems v-if="listItemsDlg || childListDlg" v-model="listItemsDlg" :column="hasManyColumn" />
+    <LazyVirtualCellComponentsUnLinkedItems v-if="listItemsDlg || childListDlg" v-model="listItemsDlg" :column="hasManyColumn" />
 
-    <LazyVirtualCellComponentsListChildItems
+    <LazyVirtualCellComponentsLinkedItems
       v-if="listItemsDlg || childListDlg"
       v-model="childListDlg"
       :cell-value="localCellValue"

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from '@vue/reactivity'
 import type { ColumnType } from 'nocodb-sdk'
-import { ref } from 'vue'
 import type { Ref } from 'vue'
+import { ref } from 'vue'
 import { ActiveCellInj, CellValueInj, ColumnInj, IsUnderLookupInj, inject, useSelectedCellKeyupListener } from '#imports'
 
 const value = inject(CellValueInj, ref(0))
@@ -151,13 +151,13 @@ watch([listItemsDlg], () => {
         @click.stop="openListDlg"
       />
     </div>
-    <LazyVirtualCellComponentsListItems
+    <LazyVirtualCellComponentsUnLinkedItems
       v-if="listItemsDlg || childListDlg"
       v-model="listItemsDlg"
       :column="relatedTableDisplayColumn"
     />
 
-    <LazyVirtualCellComponentsListChildItems
+    <LazyVirtualCellComponentsLinkedItems
       v-if="listItemsDlg || childListDlg"
       v-model="childListDlg"
       :items="toatlRecordsLinked"

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

@@ -133,9 +133,9 @@ const m2mColumn = computed(
       />
     </div>
 
-    <LazyVirtualCellComponentsListItems v-if="listItemsDlg || childListDlg" v-model="listItemsDlg" :column="m2mColumn" />
+    <LazyVirtualCellComponentsUnLinkedItems v-if="listItemsDlg || childListDlg" v-model="listItemsDlg" :column="m2mColumn" />
 
-    <LazyVirtualCellComponentsListChildItems
+    <LazyVirtualCellComponentsLinkedItems
       v-if="listItemsDlg || childListDlg"
       v-model="childListDlg"
       :cell-value="localCellValue"

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

@@ -47,6 +47,8 @@ const {
   childrenListCount,
   loadChildrenList,
   childrenListPagination,
+  childrenExcludedOffsetCount,
+  childrenListOffsetCount,
   relatedTableDisplayValueProp,
   displayValueTypeAndFormatProp,
   unlink,
@@ -121,9 +123,8 @@ watch(
 )
 
 watch(expandedFormDlg, () => {
-  if (!expandedFormDlg.value) {
-    loadChildrenList()
-  }
+  childrenExcludedOffsetCount.value = 0
+  childrenListOffsetCount.value = 0
 })
 
 /*
@@ -199,6 +200,12 @@ onMounted(() => {
   window.addEventListener('keydown', linkedShortcuts)
 })
 
+const childrenListRef = ref<HTMLDivElement>()
+
+watch(childrenListPagination, () => {
+  childrenListRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+})
+
 onUnmounted(() => {
   childrenListPagination.query = ''
   window.removeEventListener('keydown', linkedShortcuts)
@@ -208,22 +215,22 @@ onUnmounted(() => {
 <template>
   <NcModal
     v-model:visible="vModel"
+    :body-style="{ 'max-height': '640px', 'height': '85vh' }"
     :class="{ active: vModel }"
-    :footer="null"
     :closable="false"
-    size="medium"
+    :footer="null"
     :width="isForm ? 600 : 800"
-    :body-style="{ 'max-height': '640px', 'height': '85vh' }"
+    size="medium"
     wrap-class-name="nc-modal-child-list"
   >
     <LazyVirtualCellComponentsHeader
       v-if="!isForm"
-      :relation="relation"
-      :linked-records="childrenListCount"
-      :table-title="meta?.title"
+      :display-value="headerDisplayValue"
       :header="$t('activity.linkedRecords')"
+      :linked-records="childrenListCount"
       :related-table-title="relatedTableMeta?.title"
-      :display-value="headerDisplayValue"
+      :relation="relation"
+      :table-title="meta?.title"
     />
     <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 !focus-within:border-primary">
@@ -231,10 +238,11 @@ onUnmounted(() => {
         <a-input
           ref="filterQueryRef"
           v-model:value="childrenListPagination.query"
+          :bordered="false"
           :placeholder="`Search in ${relatedTableMeta?.title}`"
           class="w-full !sm:rounded-md xs:min-h-8 !xs:rounded-xl"
           size="small"
-          :bordered="false"
+          @change="childrenListPagination.page = 1"
           @keydown.capture.stop="
             (e) => {
               if (e.key === 'Escape') {
@@ -242,39 +250,38 @@ onUnmounted(() => {
               }
             }
           "
-          @change="childrenListPagination.page = 1"
         >
         </a-input>
       </div>
     </div>
-    <div class="flex flex-col flex-grow nc-scrollbar-md cursor-pointer pr-1">
+    <div ref="childrenListRef" class="flex flex-col flex-grow nc-scrollbar-md cursor-pointer pr-1">
       <div v-if="isDataExist || isChildrenLoading" class="mt-2 mb-2">
         <div class="cursor-pointer pr-1">
           <template v-if="isChildrenLoading">
             <div
-              v-for="(x, i) in Array.from({ length: skeletonCount })"
+              v-for="(_x, i) in Array.from({ length: skeletonCount })"
               :key="i"
               class="!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50"
             >
               <a-skeleton-image class="h-24 w-24 !rounded-xl" />
               <div class="flex flex-col m-[.5rem] gap-2 flex-grow justify-center">
-                <a-skeleton-input class="!w-48 !rounded-xl" active size="small" />
+                <a-skeleton-input active class="!w-48 !rounded-xl" size="small" />
                 <div class="flex flex-row gap-6 w-10/12">
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
-                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
+                    <a-skeleton-input active class="!h-4 !w-12" size="small" />
+                    <a-skeleton-input active class="!h-4 !w-24" size="small" />
                   </div>
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
-                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
+                    <a-skeleton-input active class="!h-4 !w-12" size="small" />
+                    <a-skeleton-input active class="!h-4 !w-24" size="small" />
                   </div>
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
-                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
+                    <a-skeleton-input active class="!h-4 !w-12" size="small" />
+                    <a-skeleton-input active class="!h-4 !w-24" size="small" />
                   </div>
                   <div class="flex flex-col gap-0.5">
-                    <a-skeleton-input class="!h-4 !w-12" active size="small" />
-                    <a-skeleton-input class="!h-4 !w-24" active size="small" />
+                    <a-skeleton-input active class="!h-4 !w-12" size="small" />
+                    <a-skeleton-input active class="!h-4 !w-24" size="small" />
                   </div>
                 </div>
               </div>
@@ -284,24 +291,28 @@ onUnmounted(() => {
             <LazyVirtualCellComponentsListItem
               v-for="(refRow, id) in childrenList?.list ?? state?.[colTitle] ?? []"
               :key="id"
-              :row="refRow"
-              :fields="fields"
-              data-testid="nc-child-list-item"
               :attachment="attachmentCol"
-              :related-table-display-value-prop="relatedTableDisplayValueProp"
               :display-value-type-and-format-prop="displayValueTypeAndFormatProp"
+              :fields="fields"
               :is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
               :is-loading="isChildrenListLoading[Number.parseInt(id)]"
+              :related-table-display-value-prop="relatedTableDisplayValueProp"
+              :row="refRow"
+              data-testid="nc-child-list-item"
+              @click="linkOrUnLink(refRow, id)"
               @expand="onClick(refRow)"
               @keydown.space.prevent="linkOrUnLink(refRow, id)"
               @keydown.enter.prevent="() => onClick(refRow, id)"
-              @click="linkOrUnLink(refRow, id)"
             />
           </template>
         </div>
       </div>
       <div v-else class="pt-1 flex flex-col gap-4 my-auto items-center justify-center text-gray-500 text-center">
-        <img src="~assets/img/placeholder/link-records.png" class="!w-[18.5rem] flex-none" />
+        <img
+          :alt="$t('msg.clickLinkRecordsToAddLinkFromTable', { tableName: relatedTableMeta?.title })"
+          class="!w-[18.5rem] flex-none"
+          src="~assets/img/placeholder/link-records.png"
+        />
         <div class="text-2xl text-gray-700 font-bold">{{ $t('msg.noLinkedRecords') }}</div>
         <div class="text-gray-700">
           {{ $t('msg.clickLinkRecordsToAddLinkFromTable', { tableName: relatedTableMeta?.title }) }}
@@ -352,7 +363,7 @@ onUnmounted(() => {
         />
       </div>
       <div class="flex flex-row gap-2">
-        <NcButton v-if="!isForm" type="ghost" class="nc-close-btn" @click="vModel = false"> {{ $t('general.finish') }} </NcButton>
+        <NcButton v-if="!isForm" class="nc-close-btn" type="ghost" @click="vModel = false"> {{ $t('general.finish') }} </NcButton>
         <NcButton
           v-if="!readOnly && childrenListCount > 0"
           v-e="['c:links:link']"
@@ -388,7 +399,7 @@ onUnmounted(() => {
   </NcModal>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 :deep(.nc-nested-list-item .ant-card-body) {
   @apply !px-1 !py-0;
 }

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

@@ -94,7 +94,6 @@ const displayValue = computed(() => {
     :class="{
       '!bg-white': isLoading,
       '!border-1': isLinked && !isLoading,
-      '!hover:border-gray-400': !isLinked,
       '!cursor-auto !hover:bg-white': readOnly,
     }"
     :body-style="{ padding: 0 }"
@@ -179,7 +178,7 @@ const displayValue = computed(() => {
       v-if="!isForm && !isPublic && !readOnly"
       v-e="['c:row-expand:open']"
       type="text"
-      size="lg"
+      size="medium"
       class="!px-2 nc-expand-item !group-hover:block !hidden !border-1 !shadow-sm !border-gray-200 !bg-white !absolute right-3 bottom-3"
       :class="{
         '!group-hover:right-1.8 !group-hover:bottom-1.7': fields.length === 0,

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

@@ -35,6 +35,8 @@ const { $e } = useNuxtApp()
 const {
   childrenExcludedList,
   isChildrenExcludedListLinked,
+  childrenExcludedOffsetCount,
+  childrenListOffsetCount,
   isChildrenExcludedListLoading,
   isChildrenExcludedLoading,
   childrenListCount,
@@ -166,6 +168,8 @@ watch(expandedFormDlg, () => {
     }
     loadChildrenExcludedList(rowState.value)
   }
+  childrenExcludedOffsetCount.value = 0
+  childrenListOffsetCount.value = 0
 })
 
 watch(filterQueryRef, () => {
@@ -237,6 +241,12 @@ const linkedShortcuts = (e: KeyboardEvent) => {
   }
 }
 
+const childrenExcludedListRef = ref<HTMLDivElement>()
+
+watch(childrenExcludedListPagination, () => {
+  childrenExcludedListRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+})
+
 onMounted(() => {
   window.addEventListener('keydown', linkedShortcuts)
 })
@@ -250,20 +260,20 @@ onUnmounted(() => {
 <template>
   <NcModal
     v-model:visible="vModel"
+    :body-style="{ 'max-height': '640px', 'height': '85vh' }"
     :class="{ active: vModel }"
+    :closable="false"
     :footer="null"
     :width="isForm ? 600 : 800"
-    :closable="false"
-    :body-style="{ 'max-height': '640px', 'height': '85vh' }"
     wrap-class-name="nc-modal-link-record"
   >
     <LazyVirtualCellComponentsHeader
       v-if="!isForm"
-      :relation="relation"
-      :table-title="meta?.title"
-      :related-table-title="relatedTableMeta?.title"
       :display-value="headerDisplayValue"
       :header="$t('activity.addNewLink')"
+      :related-table-title="relatedTableMeta?.title"
+      :relation="relation"
+      :table-title="meta?.title"
     />
     <div 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 !focus-within:border-primary">
@@ -271,10 +281,11 @@ onUnmounted(() => {
         <a-input
           ref="filterQueryRef"
           v-model:value="childrenExcludedListPagination.query"
+          :bordered="false"
           :placeholder="`${$t('general.searchIn')} ${relatedTableMeta?.title}`"
           class="w-full !rounded-md nc-excluded-search xs:min-h-8"
           size="small"
-          :bordered="false"
+          @change="childrenExcludedListPagination.page = 1"
           @keydown.capture.stop="
             (e) => {
               if (e.key === 'Escape') {
@@ -282,7 +293,6 @@ onUnmounted(() => {
               }
             }
           "
-          @change="childrenExcludedListPagination.page = 1"
         >
         </a-input>
       </div>
@@ -293,9 +303,9 @@ onUnmounted(() => {
       <NcButton
         v-if="!isPublic"
         v-e="['c:row-expand:open']"
-        type="secondary"
         :size="isMobileMode ? 'medium' : 'small'"
         class="!text-brand-500"
+        type="secondary"
         @click="addNewRecord"
       >
         <div class="flex items-center gap-1 px-4"><MdiPlus v-if="!isMobileMode" /> {{ $t('activity.newRecord') }}</div>
@@ -303,32 +313,32 @@ onUnmounted(() => {
     </div>
 
     <template v-if="childrenExcludedList?.pageInfo?.totalRows">
-      <div class="overflow-scroll nc-scrollbar-md pr-1 cursor-pointer flex flex-col flex-grow">
+      <div ref="childrenExcludedListRef" class="overflow-scroll nc-scrollbar-md pr-1 cursor-pointer flex flex-col flex-grow">
         <template v-if="isChildrenExcludedLoading">
           <div
-            v-for="(x, i) in Array.from({ length: 10 })"
+            v-for="(_x, i) in Array.from({ length: 10 })"
             :key="i"
             class="!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50"
           >
             <a-skeleton-image class="h-24 w-24 !rounded-xl" />
             <div class="flex flex-col m-[.5rem] gap-2 flex-grow justify-center">
-              <a-skeleton-input class="!xs:w-30 !w-48 !rounded-xl" active size="small" />
+              <a-skeleton-input active class="!xs:w-30 !w-48 !rounded-xl" size="small" />
               <div class="flex flex-row gap-6 w-10/12">
                 <div class="flex flex-col gap-0.5">
-                  <a-skeleton-input class="!h-4 !w-12" active size="small" />
-                  <a-skeleton-input class="!xs:hidden !h-4 !w-24" active size="small" />
+                  <a-skeleton-input active class="!h-4 !w-12" size="small" />
+                  <a-skeleton-input active class="!xs:hidden !h-4 !w-24" size="small" />
                 </div>
                 <div class="flex flex-col gap-0.5">
-                  <a-skeleton-input class="!h-4 !w-12" active size="small" />
-                  <a-skeleton-input class="!xs:hidden !h-4 !w-24" active size="small" />
+                  <a-skeleton-input active class="!h-4 !w-12" size="small" />
+                  <a-skeleton-input active class="!xs:hidden !h-4 !w-24" size="small" />
                 </div>
                 <div class="flex flex-col gap-0.5">
-                  <a-skeleton-input class="!h-4 !w-12" active size="small" />
-                  <a-skeleton-input class="!xs:hidden !h-4 !w-24" active size="small" />
+                  <a-skeleton-input active class="!h-4 !w-12" size="small" />
+                  <a-skeleton-input active class="!xs:hidden !h-4 !w-24" size="small" />
                 </div>
                 <div class="flex flex-col gap-0.5">
-                  <a-skeleton-input class="!h-4 !w-12" active size="small" />
-                  <a-skeleton-input class="!xs:hidden !h-4 !w-24" active size="small" />
+                  <a-skeleton-input active class="!h-4 !w-12" size="small" />
+                  <a-skeleton-input active class="!xs:hidden !h-4 !w-24" size="small" />
                 </div>
               </div>
             </div>
@@ -338,14 +348,15 @@ onUnmounted(() => {
           <LazyVirtualCellComponentsListItem
             v-for="(refRow, id) in childrenExcludedList?.list ?? []"
             :key="id"
-            data-testid="nc-excluded-list-item"
-            :row="refRow"
-            :fields="fields"
             :attachment="attachmentCol"
-            :related-table-display-value-prop="relatedTableDisplayValueProp"
             :display-value-type-and-format-prop="displayValueTypeAndFormatProp"
-            :is-loading="isChildrenExcludedListLoading[Number.parseInt(id)]"
+            :fields="fields"
             :is-linked="isChildrenExcludedListLinked[Number.parseInt(id)]"
+            :is-loading="isChildrenExcludedListLoading[Number.parseInt(id)]"
+            :related-table-display-value-prop="relatedTableDisplayValueProp"
+            :row="refRow"
+            data-testid="nc-excluded-list-item"
+            @click="() => onClick(refRow, id)"
             @expand="
               () => {
                 expandedFormRow = refRow
@@ -354,7 +365,6 @@ onUnmounted(() => {
             "
             @keydown.space.prevent="() => onClick(refRow, id)"
             @keydown.enter.prevent="() => onClick(refRow, id)"
-            @click="() => onClick(refRow, id)"
           />
         </template>
       </div>
@@ -372,7 +382,7 @@ onUnmounted(() => {
         v-if="childrenExcludedList?.pageInfo"
         v-model:current="childrenExcludedListPagination.page"
         v-model:page-size="childrenExcludedListPagination.size"
-        :total="+childrenExcludedList.pageInfo.totalRows"
+        :total="+childrenExcludedList?.pageInfo?.totalRows"
         entity-name="links-excluded-list"
       />
     </div>
@@ -390,7 +400,7 @@ onUnmounted(() => {
           v-if="childrenExcludedList?.pageInfo"
           v-model:current="childrenExcludedListPagination.page"
           v-model:page-size="childrenExcludedListPagination.size"
-          :total="+childrenExcludedList.pageInfo.totalRows"
+          :total="+childrenExcludedList?.pageInfo?.totalRows"
           entity-name="links-excluded-list"
           mode="simple"
         />
@@ -401,7 +411,15 @@ onUnmounted(() => {
       <LazySmartsheetExpandedForm
         v-if="expandedFormDlg"
         v-model="expandedFormDlg"
+        :close-after-save="isExpandedFormCloseAfterSave"
         :meta="relatedTableMeta"
+        :new-record-header="
+          isExpandedFormCloseAfterSave
+            ? $t('activity.tableNameCreateNewRecord', {
+                tableName: relatedTableMeta?.title,
+              })
+            : undefined
+        "
         :row="{
           row: expandedFormRow,
           oldRow: {},
@@ -415,14 +433,6 @@ onUnmounted(() => {
         :row-id="extractPkFromRow(expandedFormRow, relatedTableMeta.columns as ColumnType[])"
         :state="newRowState"
         use-meta-fields
-        :close-after-save="isExpandedFormCloseAfterSave"
-        :new-record-header="
-          isExpandedFormCloseAfterSave
-            ? $t('activity.tableNameCreateNewRecord', {
-                tableName: relatedTableMeta?.title,
-              })
-            : undefined
-        "
         @created-record="onCreatedRecord"
       />
     </Suspense>

packages/nc-gui/composables/useLTARStore.ts

@@ -1,4 +1,3 @@
-import { UITypes, dateFormats, parseStringDateTime, timeFormats } from 'nocodb-sdk'
 import type {
   type ColumnType,
   type LinkToAnotherRecordType,
@@ -7,7 +6,9 @@ import type {
   type RequestParams,
   type TableType,
 } from 'nocodb-sdk'
+import { UITypes, dateFormats, parseStringDateTime, timeFormats } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
+import type { Row } from '#imports'
 import {
   IsPublicInj,
   Modal,
@@ -30,7 +31,6 @@ import {
   useSharedView,
   watch,
 } from '#imports'
-import type { Row } from '#imports'
 
 interface DataApiResponse {
   list: Record<string, any>
@@ -43,7 +43,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     column: Ref<Required<ColumnType>>,
     row: Ref<Row>,
     isNewRow: ComputedRef<boolean> | Ref<boolean>,
-    reloadData = (_params: { shouldShowLoading?: boolean }) => {},
+    _reloadData = (_params: { shouldShowLoading?: boolean }) => {},
   ) => {
     // state
     const { metas, getMeta } = useMetas()
@@ -66,6 +66,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       query: '',
       size: 10,
     })
+    const childrenExcludedOffsetCount = ref(0)
 
     const childrenListPagination = reactive({
       page: 1,
@@ -73,6 +74,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       size: 10,
     })
 
+    const childrenListOffsetCount = ref(0)
+
     const isChildrenLoading = ref(false)
 
     const isChildrenListLoading = ref<Array<boolean>>([])
@@ -114,7 +117,6 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         .join('___'),
     )
 
-    // actions
     const getRelatedTableRowId = (row: Record<string, any>) => {
       return relatedTableMeta.value?.columns
         ?.filter((c) => c.pk)
@@ -122,6 +124,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         .join('___')
     }
 
+    // actions
+
     const loadRelatedTableMeta = async () => {
       await getMeta(colOptions.value.fk_related_model_id as string)
     }
@@ -182,6 +186,13 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     const loadChildrenExcludedList = async (activeState?: any) => {
       if (activeState) newRowState.state = activeState
       try {
+        let offset =
+          childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1) - childrenExcludedOffsetCount.value
+
+        if (offset < 0) {
+          offset = 0
+          childrenExcludedOffsetCount.value = 0
+        }
         isChildrenExcludedLoading.value = true
         if (isPublic.value) {
           const router = useRouter()
@@ -198,7 +209,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               },
               query: {
                 limit: childrenExcludedListPagination.size,
-                offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+                offset,
                 where:
                   childrenExcludedListPagination.query &&
                   `(${relatedTableDisplayValueProp.value},like,${childrenExcludedListPagination.query})`,
@@ -215,7 +226,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             relatedTableMeta?.value?.id as string,
             {
               limit: childrenExcludedListPagination.size,
-              offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+              offset,
               where:
                 childrenExcludedListPagination.query &&
                 `(${relatedTableDisplayValueProp.value},like,${childrenExcludedListPagination.query})`,
@@ -232,7 +243,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             column?.value?.id,
             {
               limit: String(childrenExcludedListPagination.size),
-              offset: String(childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1)),
+              offset: String(offset),
               // todo: where clause is missing from type
               where:
                 childrenExcludedListPagination.query &&
@@ -278,6 +289,15 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         isChildrenLoading.value = true
         if (colOptions.value.type === 'bt') return
         if (!rowId.value || !column.value) return
+        let offset = childrenListPagination.size * (childrenListPagination.page - 1) + childrenListOffsetCount.value
+
+        if (offset < 0) {
+          offset = 0
+          childrenListOffsetCount.value = 0
+        } else if (offset >= childrenListCount.value) {
+          offset = 0
+        }
+
         if (isPublic.value) {
           childrenList.value = await $api.public.dataNestedList(
             sharedView.value?.uuid as string,
@@ -286,7 +306,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             column.value.id,
             {
               limit: String(childrenListPagination.size),
-              offset: String(childrenListPagination.size * (childrenListPagination.page - 1)),
+              offset: String(offset),
               where:
                 childrenListPagination.query && `(${relatedTableDisplayValueProp.value},like,${childrenListPagination.query})`,
             } as any,
@@ -306,7 +326,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             column?.value?.id,
             {
               limit: String(childrenListPagination.size),
-              offset: String(childrenListPagination.size * (childrenListPagination.page - 1)),
+              offset: String(offset),
               where:
                 childrenListPagination.query && `(${relatedTableDisplayValueProp.value},like,${childrenListPagination.query})`,
             } as any,
@@ -349,7 +369,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
               return false
             }
 
-            reloadData?.({ shouldShowLoading: false })
+            _reloadData?.({ shouldShowLoading: false })
 
             /** reload child list if not a new row */
             if (!isNewRow?.value) {
@@ -386,6 +406,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       // }
       try {
         // todo: audit
+
+        childrenListOffsetCount.value = childrenListOffsetCount.value - 1
+        childrenExcludedOffsetCount.value = childrenExcludedOffsetCount.value - 1
+
         isChildrenExcludedListLoading.value[index] = true
         isChildrenListLoading.value[index] = true
         await $api.dbTableRow.nestedRemove(
@@ -420,14 +444,11 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       } catch (e: any) {
         message.error(`${t('msg.error.unlinkFailed')}: ${await extractSdkResponseErrorMsg(e)}`)
       } finally {
-        // To Keep the Loading State for Minimum 600ms
-        setTimeout(() => {
-          isChildrenExcludedListLoading.value[index] = false
-          isChildrenListLoading.value[index] = false
-        }, 600)
+        isChildrenExcludedListLoading.value[index] = false
+        isChildrenListLoading.value[index] = false
       }
 
-      reloadData?.({ shouldShowLoading: false })
+      _reloadData?.({ shouldShowLoading: false })
       $e('a:links:unlink')
     }
 
@@ -435,7 +456,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       row: Record<string, any>,
       { metaValue = meta.value }: { metaValue?: TableType } = {},
       undo = false,
-      index: number,
+      index: number, // Index is For Loading and Linked State of Row
     ) => {
       // todo: handle new record
       //   const pid = this._extractRowId(parent, this.parentMeta);
@@ -454,6 +475,9 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         isChildrenExcludedListLoading.value[index] = true
         isChildrenListLoading.value[index] = true
 
+        childrenListOffsetCount.value = childrenListOffsetCount.value + 1
+        childrenExcludedOffsetCount.value = childrenExcludedOffsetCount.value + 1
+
         await $api.dbTableRow.nestedAdd(
           NOCO,
           base.value.id as string,
@@ -480,6 +504,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         }
         isChildrenExcludedListLinked.value[index] = true
         isChildrenListLinked.value[index] = true
+
         if (colOptions.value.type !== 'bt') {
           childrenListCount.value = childrenListCount.value + 1
         } else {
@@ -491,13 +516,11 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       } finally {
         // To Keep the Loading State for Minimum 600ms
 
-        setTimeout(() => {
-          isChildrenExcludedListLoading.value[index] = false
-          isChildrenListLoading.value[index] = false
-        }, 600)
+        isChildrenExcludedListLoading.value[index] = false
+        isChildrenListLoading.value[index] = false
       }
 
-      reloadData?.({ shouldShowLoading: false })
+      _reloadData?.({ shouldShowLoading: false })
       $e('a:links:link')
     }
 
@@ -525,6 +548,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       childrenExcludedList,
       childrenList,
       childrenListCount,
+      childrenListOffsetCount,
+      childrenExcludedOffsetCount,
       rowId,
       childrenExcludedListPagination,
       childrenListPagination,

tests/playwright/pages/Dashboard/ExpandedForm/index.ts

@@ -68,7 +68,7 @@ export class ExpandedFormPage extends BasePage {
   }
 
   async fillField({ columnTitle, value, type = 'text' }: { columnTitle: string; value: string; type?: string }) {
-    const field = this.get().locator(`[data-testid="nc-expand-col-${columnTitle}"]`);
+    const field = this.get().getByTestId(`nc-expand-col-${columnTitle}`);
     switch (type) {
       case 'text':
         await field.locator('input').fill(value);

tests/playwright/tests/db/columns/columnLinkToAnotherRecord.spec.ts

@@ -45,7 +45,6 @@ test.describe('LTAR create & update', () => {
       childTable: 'Sheet2',
       relationType: 'Many To many',
     });
-    await dashboard.closeTab({ title: 'Sheet1' });
 
     await dashboard.treeView.openTable({ title: 'Sheet2', networkResponse: false });
     await dashboard.grid.column.create({