feat: child item preloader

packages/nc-gui/components.d.ts

@@ -120,6 +120,7 @@ declare module '@vue/runtime-core' {
     MdiChatProcessingOutline: typeof import('~icons/mdi/chat-processing-outline')['default']
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     MdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     MdiCircleMedium: typeof import('~icons/mdi/circle-medium')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']

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

@@ -177,7 +177,34 @@ onKeyStroke('Escape', () => {
           class="overflow-scroll nc-scrollbar-md cursor-pointer pr-1"
         >
           <template v-if="isChildrenLoading">
-            <a-skeleton v-for="(x, i) in Array.from({ length: 10 })" :key="i" active> </a-skeleton>
+            <div
+              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-[.75rem] gap-1 flex-grow justify-center">
+                <a-skeleton-input style="width: 200px" active size="small" />
+                <div class="flex flex-row gap-4 w-10/12">
+                  <div class="flex flex-col gap-0.5">
+                    <a-skeleton-input style="width: 70px" active size="small" />
+                    <a-skeleton-input style="width: 140px" active size="small" />
+                  </div>
+                  <div class="flex flex-col gap-0.5">
+                    <a-skeleton-input style="width: 70px" active size="small" />
+                    <a-skeleton-input style="width: 140px" active size="small" />
+                  </div>
+                  <div class="flex flex-col gap-0.5">
+                    <a-skeleton-input style="width: 70px" active size="small" />
+                    <a-skeleton-input style="width: 140px" active size="small" />
+                  </div>
+                  <div class="flex flex-col gap-0.5">
+                    <a-skeleton-input style="width: 70px" active size="small" />
+                    <a-skeleton-input style="width: 140px" active size="small" />
+                  </div>
+                </div>
+              </div>
+            </div>
           </template>
           <template v-else>
             <LazyVirtualCellComponentsListItem
@@ -253,8 +280,8 @@ onKeyStroke('Escape', () => {
           show-less-items
         />
       </div>
-      <div class="flex flex-row gap-1">
-        <NcButton v-if="!isForm" type="ghost" class="nc-close-btn" @click="vModel = false"> Cancel </NcButton>
+      <div class="flex flex-row gap-2">
+        <NcButton v-if="!isForm" type="ghost" class="nc-close-btn" @click="vModel = false"> Finish </NcButton>
         <NcButton
           v-if="!readonly && childrenListCount > 0"
           data-testid="nc-child-list-button-link-to"

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

@@ -48,7 +48,7 @@ const attachments: Attachment[] = computed(() => {
     class="!border-1 group transition-all !rounded-xl relative !mb-2 !border-gray-200 hover:bg-gray-50"
     :class="{
       '!bg-white': isLoading,
-      ' !border-1': isLinked,
+      '!border-1': isLinked && !isLoading,
       '!hover:border-gray-400': !isLinked,
     }"
     :body-style="{ padding: 0 }"

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

@@ -212,7 +212,34 @@ onKeyStroke('Escape', () => {
       <div class="pb-2 pt-1">
         <div class="h-[420px] overflow-scroll nc-scrollbar-md pr-1 cursor-pointer">
           <template v-if="isChildrenExcludedLoading">
-            <a-skeleton v-for="(x, i) in Array.from({ length: 10 })" :key="i" active> </a-skeleton>
+            <div
+              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-[.75rem] gap-1 flex-grow justify-center">
+                <a-skeleton-input style="width: 200px" active size="small" />
+                <div class="flex flex-row gap-4 w-10/12">
+                  <div class="flex flex-col gap-0.5">
+                    <a-skeleton-input style="width: 70px" active size="small" />
+                    <a-skeleton-input style="width: 140px" active size="small" />
+                  </div>
+                  <div class="flex flex-col gap-0.5">
+                    <a-skeleton-input style="width: 70px" active size="small" />
+                    <a-skeleton-input style="width: 140px" active size="small" />
+                  </div>
+                  <div class="flex flex-col gap-0.5">
+                    <a-skeleton-input style="width: 70px" active size="small" />
+                    <a-skeleton-input style="width: 140px" active size="small" />
+                  </div>
+                  <div class="flex flex-col gap-0.5">
+                    <a-skeleton-input style="width: 70px" active size="small" />
+                    <a-skeleton-input style="width: 140px" active size="small" />
+                  </div>
+                </div>
+              </div>
+            </div>
           </template>
           <template v-else>
             <LazyVirtualCellComponentsListItem
@@ -272,7 +299,7 @@ onKeyStroke('Escape', () => {
           show-less-items
         />
       </div>
-      <NcButton class="nc-close-btn ml-auto" type="ghost" @click="vModel = false"> Cancel </NcButton>
+      <NcButton class="nc-close-btn ml-auto" type="ghost" @click="vModel = false"> Finish </NcButton>
     </div>
     <Suspense>
       <LazySmartsheetExpandedForm