Merge branch 'blob-lcp-improvement' into 'master'

Blob refactor: Improve LCP when viewing large blobs

See merge request gitlab-org/gitlab!82615

app/assets/javascripts/repository/components/blob_content_viewer.vue

@@ -94,6 +94,7 @@ export default {
       legacySimpleViewer: null,
       isBinary: false,
       isLoadingLegacyViewer: false,
+      isRenderingLegacyTextViewer: false,
       activeViewerType: SIMPLE_BLOB_VIEWER,
       project: DEFAULT_BLOB_INFO.project,
       gitpodEnabled: DEFAULT_BLOB_INFO.gitpodEnabled,
@@ -185,7 +186,13 @@ export default {
         .get(`${this.blobInfo.webPath}?format=json&viewer=${type}`)
         .then(({ data: { html, binary } }) => {
           if (type === SIMPLE_BLOB_VIEWER) {
+            this.isRenderingLegacyTextViewer = true;
+
             this.legacySimpleViewer = html;
+
+            window.requestIdleCallback(() => {
+              this.isRenderingLegacyTextViewer = false;
+            });
           } else {
             this.legacyRichViewer = html;
           }
@@ -286,6 +293,7 @@ export default {
         :active-viewer="viewer"
         :hide-line-numbers="true"
         :loading="isLoadingLegacyViewer"
+        :data-loading="isRenderingLegacyTextViewer"
       />
       <component :is="blobViewer" v-else :blob="blobInfo" class="blob-viewer" />
       <code-intelligence

spec/frontend/repository/components/blob_content_viewer_spec.js

@@ -121,6 +121,10 @@ const createComponent = async (mockData = {}, mountFn = shallowMount) => {
   await waitForPromises();
 };
 
+const execImmediately = (callback) => {
+  callback();
+};
+
 describe('Blob content viewer component', () => {
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findBlobHeader = () => wrapper.findComponent(BlobHeader);
@@ -131,6 +135,7 @@ describe('Blob content viewer component', () => {
   const findCodeIntelligence = () => wrapper.findComponent(CodeIntelligence);
 
   beforeEach(() => {
+    jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
     isLoggedIn.mockReturnValue(true);
   });