feat(nc-gui): add spinner during parsing large data

packages/nc-gui/components/dlg/QuickImport.vue

@@ -51,6 +51,8 @@ const importColumns = ref([])
 
 const templateEditorModal = ref(false)
 
+const isParsingData = ref(false)
+
 const useForm = Form.useForm
 
 const importState = reactive({
@@ -134,6 +136,7 @@ const modalWidth = computed(() => {
 
 async function handlePreImport() {
   loading.value = true
+  isParsingData.value = true
 
   if (activeKey.value === 'uploadTab') {
     // TODO: update
@@ -149,7 +152,9 @@ async function handlePreImport() {
     await parseAndExtractData(JSON.stringify(importState.jsonEditor))
   }
 
-  loading.value = false
+  // TODO: fix
+  // loading.value = false
+  // isParsingData.value = false
 }
 
 async function handleImport() {
@@ -188,8 +193,8 @@ async function parseAndExtractData2(val: UploadFile[]) {
       // importData.value = templateGenerator.getData()
 
       // if (importOnly) importColumns.value = templateGenerator.getColumns()
-
       templateEditorModal.value = true
+      isParsingData.value = false
     })
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -338,6 +343,7 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
     wrap-class-name="nc-modal-quick-import"
     @keydown.esc="dialogShow = false"
   >
+    <a-spin :spinning="isParsingData" tip="Parsing Data ..." size="large">
       <div class="px-5">
         <div class="prose-xl font-weight-bold my-5">{{ importMeta.header }}</div>
 
@@ -446,7 +452,7 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
           </div>
         </div>
       </div>
-
+    </a-spin>
     <template #footer>
       <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>