2 files changed, 31 insertions, 13 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>
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index 7f8781fcc49..c280096b2bf 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -4,7 +4,7 @@ import {
   GlAvatar,
   GlIcon,
   GlSprintf,
-  GlButton,
+  GlDeprecatedButton,
   GlModal,
   GlAlert,
   GlLoadingIcon,
@@ -22,7 +22,7 @@ export default {
     GlAvatar,
     GlIcon,
     GlSprintf,
-    GlButton,
+    GlDeprecatedButton,
     GlModal,
     GlAlert,
     GlLoadingIcon,
@@ -189,7 +189,7 @@ export default {
     <div class="detail-page-header-actions">
       <div class="d-none d-sm-block">
         <template v-for="(action, index) in personalSnippetActions">
-          <gl-button
+          <gl-deprecated-button
             v-if="action.condition"
             :key="index"
             :variant="action.variant"
@@ -198,7 +198,7 @@ export default {
             @click="action.click ? action.click() : undefined"
           >
             {{ action.text }}
-          </gl-button>
+          </gl-deprecated-button>
         </template>
       </div>
       <div class="d-block d-sm-none dropdown">
@@ -228,8 +228,8 @@ export default {
       </gl-sprintf>
 
       <template #modal-footer>
-        <gl-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-button>
-        <gl-button
+        <gl-deprecated-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-deprecated-button>
+        <gl-deprecated-button
           variant="danger"
           :disabled="isDeleting"
           data-qa-selector="delete_snippet_button"
@@ -237,7 +237,7 @@ export default {
         >
           <gl-loading-icon v-if="isDeleting" inline />
           {{ __('Delete snippet') }}
-        </gl-button>
+        </gl-deprecated-button>
       </template>
     </gl-modal>
   </div>