chore: add loading

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -87,6 +87,11 @@ const { isExpandedFormCommentMode } = storeToRefs(useConfigStore())
 // override cell click hook to avoid unexpected behavior at form fields
 provide(CellClickHookInj, undefined)
 
+const loadingEmit = (event: 'update:modelValue' | 'cancel' | 'next' | 'prev' | 'createdRecord') => {
+  emits(event)
+  isLoading.value = true
+}
+
 const fields = computedInject(FieldsInj, (_fields) => {
   if (props.useMetaFields) {
     return (meta.value.columns ?? []).filter((col) => !isSystemColumn(col))
@@ -239,7 +244,7 @@ const isCloseModalOpen = ref(false)
 const discardPreventModal = () => {
   // when user click on next or previous button
   if (isPreventChangeModalOpen.value) {
-    emits('next')
+    loadingEmit('next')
     if (_row.value?.rowMeta?.new) emits('cancel')
     isPreventChangeModalOpen.value = false
   }
@@ -258,7 +263,7 @@ const onNext = async () => {
     isPreventChangeModalOpen.value = true
     return
   }
-  emits('next')
+  loadingEmit('next')
 }
 
 const copyRecordUrl = async () => {
@@ -277,7 +282,7 @@ const saveChanges = async () => {
   if (isPreventChangeModalOpen.value) {
     isUnsavedFormExist.value = false
     await save()
-    emits('next')
+    loadingEmit('next')
     isPreventChangeModalOpen.value = false
   }
   if (isCloseModalOpen.value) {
@@ -312,6 +317,7 @@ provide(IsExpandedFormOpenInj, isExpanded)
 
 const triggerRowLoad = async (rowId?: string) => {
   await Promise.allSettled([loadComments(), loadAudits(), _loadRow(rowId)])
+  isLoading.value = false
 }
 
 const cellWrapperEl = ref()
@@ -361,7 +367,7 @@ useActiveKeyupListener(
     if (!e.altKey) return
     if (e.key === 'ArrowLeft') {
       e.stopPropagation()
-      emits('prev')
+      loadingEmit('prev')
     } else if (e.key === 'ArrowRight') {
       e.stopPropagation()
       onNext()
@@ -567,7 +573,7 @@ export default {
                 class="nc-prev-arrow !w-7 !h-7 !text-gray-500 !disabled:text-gray-300"
                 type="text"
                 size="xsmall"
-                @click="$emit('prev')"
+                @click="loadingEmit('prev')"
               >
                 <GeneralIcon icon="chevronDown" class="transform rotate-180" />
               </NcButton>

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -43,7 +43,10 @@ const { gridViewCols } = useViewColumnsOrThrow()
 
 const { fieldsToGroupBy, groupByLimit } = useViewGroupByOrThrow(view)
 
+const isLoading = ref('')
+
 const setAsDisplayValue = async () => {
+  isLoading.value = 'setDisplay'
   try {
     const currentDisplayValue = meta?.value?.columns?.find((f) => f.pv)
 
@@ -92,6 +95,7 @@ const setAsDisplayValue = async () => {
   } catch (e) {
     message.error(t('msg.error.primaryColumnUpdateFailed'))
   }
+  isLoading.value = ''
 }
 
 const sortByColumn = async (direction: 'asc' | 'desc') => {
@@ -233,6 +237,7 @@ const addColumn = async (before = false) => {
 
 // hide the field in view
 const hideOrShowField = async () => {
+  isLoading.value = 'hideOrShow'
   const gridViewColumnList = (await $api.dbViewColumn.list(view.value?.id as string)).list
 
   const currentColumn = gridViewColumnList.find((f) => f.fk_column_id === column!.value.id)
@@ -288,6 +293,7 @@ const hideOrShowField = async () => {
     },
     scope: defineViewScope({ view: view.value }),
   })
+  // isLoading.value = false
 }
 
 const handleDelete = () => {
@@ -387,6 +393,7 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
             <!-- Hide Field -->
             {{ isHiddenCol ? $t('general.showField') : $t('general.hideField') }}
           </div>
+          <GeneralLoader v-show="isLoading === 'hideOrShow'" size="large" class="ml-2" />
         </NcMenuItem>
         <NcMenuItem
           v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv && !isHiddenCol"
@@ -399,6 +406,7 @@ const filterOrGroupByThisField = (event: SmartsheetStoreEvents) => {
             <!-- Set as Display value -->
             {{ $t('activity.setDisplay') }}
           </div>
+          <GeneralLoader v-show="isLoading === 'setDisplay'" size="large" class="ml-2" />
         </NcMenuItem>
 
         <template v-if="!isExpandedForm">