diff options
Diffstat (limited to 'app/assets/javascripts/snippets/components/snippet_blob_edit.vue')
-rw-r--r-- | app/assets/javascripts/snippets/components/snippet_blob_edit.vue | 30 |
1 files changed, 24 insertions, 6 deletions
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue index 624ca18eec9..ae6f451df18 100644 --- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue +++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue @@ -1,23 +1,30 @@ <script> import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue'; import BlobContentEdit from '~/blob/components/blob_edit_content.vue'; +import { GlLoadingIcon } from '@gitlab/ui'; export default { components: { BlobHeaderEdit, BlobContentEdit, + GlLoadingIcon, }, inheritAttrs: false, props: { + value: { + type: String, + required: false, + default: '', + }, fileName: { type: String, required: false, default: '', }, - }, - methods: { - emitFileNameChange(newFileName) { - this.$emit('name-change', newFileName); + isLoading: { + type: Boolean, + required: false, + default: true, }, }, }; @@ -26,8 +33,19 @@ export default { <div class="form-group file-editor"> <label>{{ s__('Snippets|File') }}</label> <div class="file-holder snippet"> - <blob-header-edit :value="fileName" @input="emitFileNameChange" /> - <blob-content-edit v-bind="$attrs" :file-name="fileName" v-on="$listeners" /> + <blob-header-edit :value="fileName" @input="$emit('name-change', $event)" /> + <gl-loading-icon + v-if="isLoading" + :label="__('Loading snippet')" + :size="2" + class="loading-animation prepend-top-20 append-bottom-20" + /> + <blob-content-edit + v-else + :value="value" + :file-name="fileName" + @input="$emit('input', $event)" + /> </div> </div> </template> |