diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
index f6055054cb0c41a99926627e241c9bcc056ddf97..f477610ff1dbfbdf0d028ec30904cbd29f0fe13b 100644
--- a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
@@ -1,16 +1,17 @@
 <script>
 /* eslint-disable vue/no-v-html */
 import { GlIcon } from '@gitlab/ui';
-import EditorLite from '~/vue_shared/components/editor_lite.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { HIGHLIGHT_CLASS_NAME } from './constants';
 import ViewerMixin from './mixins';
 
 export default {
   components: {
     GlIcon,
-    EditorLite,
+    EditorLite: () =>
+      import(/* webpackChunkName: 'EditorLite' */ '~/vue_shared/components/editor_lite.vue'),
   },
-  mixins: [ViewerMixin],
+  mixins: [ViewerMixin, glFeatureFlagsMixin()],
   inject: ['blobHash'],
   data() {
     return {
@@ -21,6 +22,9 @@ export default {
     lineNumbers() {
       return this.content.split('\n').length;
     },
+    refactorBlobViewerEnabled() {
+      return this.glFeatures.refactorBlobViewer;
+    },
   },
   mounted() {
     const { hash } = window.location;
@@ -49,7 +53,7 @@ export default {
 <template>
   <div>
     <editor-lite
-      v-if="isRawContent"
+      v-if="isRawContent && refactorBlobViewerEnabled"
       :value="content"
       :file-name="fileName"
       :editor-options="{ readOnly: true }"
diff --git a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
index 92a326efd832a1172bd034359b286c0386c8f868..46d4edad891ea5c6231f29b547d5a4fbb1c586a9 100644
--- a/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import waitForPromises from 'helpers/wait_for_promises';
 import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants';
 import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue';
 import EditorLite from '~/vue_shared/components/editor_lite.vue';
@@ -8,10 +9,17 @@ describe('Blob Simple Viewer component', () => {
   const contentMock = `<span id="LC1">First</span>\n<span id="LC2">Second</span>\n<span id="LC3">Third</span>`;
   const blobHash = 'foo-bar';
 
-  function createComponent(content = contentMock, isRawContent = false) {
+  function createComponent(
+    content = contentMock,
+    isRawContent = false,
+    isRefactorFlagEnabled = false,
+  ) {
     wrapper = shallowMount(SimpleViewer, {
       provide: {
         blobHash,
+        glFeatures: {
+          refactorBlobViewer: isRefactorFlagEnabled,
+        },
       },
       propsData: {
         content,
@@ -87,17 +95,31 @@ describe('Blob Simple Viewer component', () => {
     });
   });
 
-  describe('raw content', () => {
+  describe('Vue refactoring to use Source Editor', () => {
     const findEditorLite = () => wrapper.find(EditorLite);
-    const isRawContent = true;
 
-    it('uses the Editor Lite component in readonly mode when viewing raw content', () => {
-      createComponent('raw content', isRawContent);
-
-      expect(findEditorLite().exists()).toBe(true);
-      expect(findEditorLite().props('value')).toBe('raw content');
-      expect(findEditorLite().props('fileName')).toBe('test.js');
-      expect(findEditorLite().props('editorOptions')).toEqual({ readOnly: true });
-    });
+    it.each`
+      doesRender    | condition                                          | isRawContent | isRefactorFlagEnabled
+      ${'Does not'} | ${'rawContent is not specified'}                   | ${false}     | ${true}
+      ${'Does not'} | ${'feature flag is disabled is not specified'}     | ${true}      | ${false}
+      ${'Does not'} | ${'both, the FF and rawContent are not specified'} | ${false}     | ${false}
+      ${'Does'}     | ${'both, the FF and rawContent are specified'}     | ${true}      | ${true}
+    `(
+      '$doesRender render Editor Lite component in readonly mode when $condition',
+      async ({ isRawContent, isRefactorFlagEnabled } = {}) => {
+        createComponent('raw content', isRawContent, isRefactorFlagEnabled);
+        await waitForPromises();
+
+        if (isRawContent && isRefactorFlagEnabled) {
+          expect(findEditorLite().exists()).toBe(true);
+
+          expect(findEditorLite().props('value')).toBe('raw content');
+          expect(findEditorLite().props('fileName')).toBe('test.js');
+          expect(findEditorLite().props('editorOptions')).toEqual({ readOnly: true });
+        } else {
+          expect(findEditorLite().exists()).toBe(false);
+        }
+      },
+    );
   });
 });