[Fix][UI] Add loading before file modification data is returned. (#10450)

dolphinscheduler-ui/src/views/resource/file/edit/index.tsx

@@ -17,7 +17,7 @@
 
 import { useRoute, useRouter } from 'vue-router'
 import { defineComponent, toRefs, watch } from 'vue'
-import { NButton, NForm, NFormItem, NSpace } from 'naive-ui'
+import { NButton, NForm, NFormItem, NSpace, NSpin } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useForm } from './use-form'
 import { useEdit } from './use-edit'
@@ -38,7 +38,7 @@ export default defineComponent({
     const { getResourceView, handleUpdateContent } = useEdit(state)
 
     const handleFileContent = () => {
-      state.fileForm.content = resourceViewRef.value.content
+      state.fileForm.content = resourceViewRef.state.value.content
       handleUpdateContent(fileId)
     }
 
@@ -47,10 +47,9 @@ export default defineComponent({
     }
 
     const resourceViewRef = getResourceView(fileId)
-
     watch(
-      () => resourceViewRef.value.content,
-      () => (state.fileForm.content = resourceViewRef.value.content)
+      () => resourceViewRef.state.value.content,
+      () => (state.fileForm.content = resourceViewRef.state.value.content)
     )
 
     return {
@@ -65,9 +64,10 @@ export default defineComponent({
     const { t } = useI18n()
     return (
       <Card title={t('resource.file.file_details')}>
+        {this.resourceViewRef.isReady.value ? (
           <div class={styles['file-edit-content']}>
             <h2>
-            <span>{this.resourceViewRef.alias}</span>
+              <span>{this.resourceViewRef.state.value.alias}</span>
             </h2>
             <NForm
               rules={this.rules}
@@ -76,7 +76,9 @@ export default defineComponent({
               disabled={this.componentName !== 'resource-file-edit'}
             >
               <NFormItem path='content'>
-              <MonacoEditor v-model={[this.resourceViewRef.content, 'value']} />
+                <MonacoEditor
+                  v-model={[this.resourceViewRef.state.value.content, 'value']}
+                />
               </NFormItem>
               <NSpace>
                 <NButton
@@ -103,6 +105,11 @@ export default defineComponent({
               </NSpace>
             </NForm>
           </div>
+        ) : (
+          <NSpace justify='center'>
+            <NSpin show={true} />
+          </NSpace>
+        )}
       </Card>
     )
   }

dolphinscheduler-ui/src/views/resource/file/edit/use-edit.ts

@@ -33,11 +33,10 @@ export function useEdit(state: any) {
       skipLineNum: 0,
       limit: 3000
     }
-    const { state } = useAsyncState(viewResource(params, id), {
+    return useAsyncState(viewResource(params, id), {
       alias: '',
       content: ''
     })
-    return state
   }
 
   const handleUpdateContent = (id: number) => {