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>