From 788e3343291b7a4b2d080f7050f6ed574c249802 Mon Sep 17 00:00:00 2001
From: Amy0104 <97265214+Amy0104@users.noreply.github.com>
Date: Wed, 15 Jun 2022 15:06:06 +0800
Subject: [PATCH] [Fix][UI] Add loading before file modification data is
 returned. (#10450)

(cherry picked from commit d516369e8076166ec85227f4adf3d1e9085285a6)
---
 .../src/views/resource/file/edit/index.tsx    | 83 ++++++++++---------
 .../src/views/resource/file/edit/use-edit.ts  |  3 +-
 2 files changed, 46 insertions(+), 40 deletions(-)

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