fix: Added loader for api

packages/nc-gui/components/smartsheet/Details.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { LoadingOutlined } from '@ant-design/icons-vue'
+
 const { openedViewsTab } = storeToRefs(useViewsStore())
 const { onViewsTabChange } = useViewsStore()
 
@@ -8,6 +10,17 @@ const { $e } = useNuxtApp()
 
 const { isUIAllowed } = useRoles()
 
+const { base } = storeToRefs(useBase())
+const meta = inject(MetaInj, ref())
+const view = inject(ActiveViewInj, ref())
+
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '2rem',
+  },
+  spin: true,
+})
+
 const openedSubTab = computed({
   get() {
     return openedViewsTab.value
@@ -66,7 +79,10 @@ watch(openedSubTab, () => {
             <div>{{ $t('labels.apis') }}</div>
           </div>
         </template>
-        <SmartsheetDetailsApi />
+        <SmartsheetDetailsApi v-if="base && meta && view" />
+        <div v-else class="h-full w-full flex flex-col justify-center items-center mt-28 mb-4">
+          <a-spin size="large" :indicator="indicator" />
+        </div>
       </a-tab-pane>
 
       <a-tab-pane v-if="isUIAllowed('hookList')" key="webhook">

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import HTTPSnippet from 'httpsnippet'
+import { LoadingOutlined } from '@ant-design/icons-vue'
+
 import {
   ActiveViewInj,
   MetaInj,
@@ -31,6 +33,13 @@ const { xWhere } = useSmartsheetStoreOrThrow()
 
 const { queryParams } = useViewData(meta, view, xWhere)
 
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '2rem',
+  },
+  spin: true,
+})
+
 const { copy } = useCopy()
 
 const langs = [
@@ -75,7 +84,7 @@ const selectedLangName = ref(langs[0].name)
 const apiUrl = computed(
   () =>
     new URL(
-      `/api/v1/data/noco/${base.value.id}/${meta.value?.title}/views/${view.value?.title}`,
+      `/api/v1/data/noco/${base.value?.id}/${meta.value?.title}/views/${view.value?.title}`,
       (appInfo.value && appInfo.value.ncSiteUrl) || '/',
     ).href,
 )
@@ -109,7 +118,7 @@ const api = new Api({
 
 api.dbViewRow.list(
   "noco",
-  ${JSON.stringify(base.value.title)},
+  ${JSON.stringify(base.value?.title)},
   ${JSON.stringify(meta.value?.title)},
   ${JSON.stringify(view.value?.title)}, ${JSON.stringify(queryParams.value, null, 4)}).then(function (data) {
   console.log(data);
@@ -180,16 +189,23 @@ watch(activeLang, (newLang) => {
           </NcButton>
         </div>
 
-        <LazyMonacoEditor
-          class="border-1 border-gray-200 py-4 rounded-lg"
-          style="height: calc(100vh - (var(--topbar-height) * 2) - 8rem)"
-          :model-value="code"
-          :read-only="true"
-          lang="typescript"
-          :validate="false"
-          :disable-deep-compare="true"
-          hide-minimap
-        />
+        <Suspense>
+          <MonacoEditor
+            class="border-1 border-gray-200 py-4 rounded-lg"
+            style="height: calc(100vh - (var(--topbar-height) * 2) - 8rem)"
+            :model-value="code"
+            :read-only="true"
+            lang="typescript"
+            :validate="false"
+            :disable-deep-compare="true"
+            hide-minimap
+          />
+          <template #fallback>
+            <div class="h-full w-full flex flex-col justify-center items-center mt-28">
+              <a-spin size="large" :indicator="indicator" />
+            </div>
+          </template>
+        </Suspense>
       </a-tab-pane>
     </NcTabs>
   </div>