fix: Added details page skelton

packages/nc-gui/components/smartsheet/details/Erd.vue

@@ -1,9 +1,28 @@
 <script lang="ts" setup>
-const { activeTable } = storeToRefs(useTablesStore())
+import { LoadingOutlined } from '@ant-design/icons-vue'
+
+const { activeTable, baseTables } = storeToRefs(useTablesStore())
+
+const { openedProject } = storeToRefs(useBases())
+
+const isDataLoaded = computed(() => {
+  return openedProject.value && baseTables.value.get(openedProject.value.id!)
+})
+
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '2.5rem',
+  },
+  spin: true,
+})
 </script>
 
 <template>
   <div class="flex flex-col p-4" style="height: calc(100vh - (var(--topbar-height) * 2))">
-    <LazyErdView :table="activeTable" :source-id="activeTable?.source_id" :show-all-columns="false" />
+    <div v-if="!isDataLoaded" class="h-full w-full flex flex-col justify-center items-center">
+      <a-spin size="large" :indicator="indicator" />
+    </div>
+
+    <LazyErdView v-else :table="activeTable" :source-id="activeTable?.source_id" :show-all-columns="false" />
   </div>
 </template>

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -43,7 +43,12 @@ const moveOps = ref<moveOp[]>([])
 
 const visibilityOps = ref<fieldsVisibilityOps[]>([])
 
-const { fields: viewFields, toggleFieldVisibility, loadViewColumns } = useViewColumns(view, meta as Ref<TableType | undefined>)
+const {
+  fields: viewFields,
+  toggleFieldVisibility,
+  loadViewColumns,
+  isViewColumnsLoading,
+} = useViewColumns(view, meta as Ref<TableType | undefined>)
 
 const loading = ref(false)
 
@@ -571,6 +576,15 @@ onMounted(async () => {
 <template>
   <div class="w-full p-4">
     <div class="max-w-250 h-full w-full mx-auto">
+      <div v-if="isViewColumnsLoading" class="flex flex-row justify-between mt-2">
+        <a-skeleton-input class="!h-8 !w-68 !rounded !overflow-hidden" active size="small" />
+        <div class="flex flex-row gap-x-4">
+          <a-skeleton-input class="!h-8 !w-22 !rounded !overflow-hidden" active size="small" />
+          <a-skeleton-input class="!h-8 !w-22 !rounded !overflow-hidden" active size="small" />
+          <a-skeleton-input class="!h-8 !w-22 !rounded !overflow-hidden" active size="small" />
+        </div>
+      </div>
+      <template v-else>
         <div class="flex w-full justify-between py-2">
           <a-input v-model:value="searchQuery" class="!h-8 !px-1 !rounded-lg !w-72" placeholder="Search field">
             <template #prefix>
@@ -821,6 +835,7 @@ onMounted(async () => {
             </div>
           </Transition>
         </div>
+      </template>
     </div>
   </div>
 </template>

packages/nc-gui/components/smartsheet/details/Webhooks.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import type { HookType } from 'nocodb-sdk'
+import { LoadingOutlined } from '@ant-design/icons-vue'
+
 // const showWebhookDrawer = ref(false)
 
 const router = useRouter()
@@ -14,6 +16,13 @@ const modalDeleteButtonRef = ref(null)
 
 const { activeTable } = storeToRefs(useTablesStore())
 
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '2.5rem',
+  },
+  spin: true,
+})
+
 /*
 const eventList = ref<Record<string, any>[]>([
   { text: ['After', 'Insert'], value: ['after', 'insert'] },
@@ -278,6 +287,13 @@ watch(
       </div>
     </div>
   </div>
+  <div
+    v-else
+    class="h-full w-full flex flex-col justify-center items-center"
+    style="height: calc(100vh - (var(--topbar-height) * 2))"
+  >
+    <a-spin size="large" :indicator="indicator" />
+  </div>
   <GeneralDeleteModal v-model:visible="showDeleteModal" :entity-name="$t('objects.webhook')" :on-delete="deleteHook">
     <template #entity-preview>
       <div v-if="toBeDeleteHook" class="flex flex-row items-center py-2 px-3 bg-gray-50 rounded-lg text-gray-700 mb-4">

packages/nc-gui/composables/useViewColumns.ts

@@ -21,6 +21,8 @@ export function useViewColumns(
 
   const { isSharedBase } = storeToRefs(useBase())
 
+  const isViewColumnsLoading = ref(false)
+
   const { addUndo, defineViewScope } = useUndoRedo()
 
   const isLocalMode = computed(
@@ -265,7 +267,13 @@ export function useViewColumns(
     async ([newViewId]) => {
       // reload only if view belongs to current table
       if (newViewId && view.value?.fk_model_id === meta.value?.id) {
+        isViewColumnsLoading.value = true
+        try {
           await loadViewColumns()
+        } catch (e) {
+          console.error(e)
+        }
+        isViewColumnsLoading.value = false
       }
     },
     { immediate: true },
@@ -283,5 +291,6 @@ export function useViewColumns(
     showSystemFields,
     metaColumnById,
     toggleFieldVisibility,
+    isViewColumnsLoading,
   }
 }