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

(cherry picked from commit d516369e80)

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,
+      () => resourceViewRef.state.value.content,
-      () => (state.fileForm.content = resourceViewRef.value.content)
+      () => (state.fileForm.content = resourceViewRef.state.value.content)
     )
 
     return {
@@ -65,44 +64,52 @@ export default defineComponent({
     const { t } = useI18n()
     return (
       <Card title={t('resource.file.file_details')}>
-        <div class={styles['file-edit-content']}>
+        {this.resourceViewRef.isReady.value ? (
-          <h2>
+          <div class={styles['file-edit-content']}>
-            <span>{this.resourceViewRef.alias}</span>
+            <h2>
-          </h2>
+              <span>{this.resourceViewRef.state.value.alias}</span>
-          <NForm
+            </h2>
-            rules={this.rules}
+            <NForm
-            ref='fileFormRef'
+              rules={this.rules}
-            class={styles['form-content']}
+              ref='fileFormRef'
-            disabled={this.componentName !== 'resource-file-edit'}
+              class={styles['form-content']}
-          >
+              disabled={this.componentName !== 'resource-file-edit'}
-            <NFormItem path='content'>
+            >
-              <MonacoEditor v-model={[this.resourceViewRef.content, 'value']} />
+              <NFormItem path='content'>
-            </NFormItem>
+                <MonacoEditor
-            <NSpace>
+                  v-model={[this.resourceViewRef.state.value.content, 'value']}
-              <NButton
+                />
-                type='info'
+              </NFormItem>
-                size='small'
+              <NSpace>
-                text
-                style={{ marginRight: '15px' }}
-                onClick={this.handleReturn}
-                class='btn-cancel'
-              >
-                {t('resource.file.return')}
-              </NButton>
-              {this.componentName === 'resource-file-edit' && (
                 <NButton
                   type='info'
                   size='small'
-                  round
+                  text
-                  onClick={() => this.handleFileContent()}
+                  style={{ marginRight: '15px' }}
-                  class='btn-submit'
+                  onClick={this.handleReturn}
+                  class='btn-cancel'
                 >
-                  {t('resource.file.save')}
+                  {t('resource.file.return')}
                 </NButton>
-              )}
+                {this.componentName === 'resource-file-edit' && (
-            </NSpace>
+                  <NButton
-          </NForm>
+                    type='info'
-        </div>
+                    size='small'
+                    round
+                    onClick={() => this.handleFileContent()}
+                    class='btn-submit'
+                  >
+                    {t('resource.file.save')}
+                  </NButton>
+                )}
+              </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) => {