1 files changed, 31 insertions, 9 deletions

diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 22c6b31143f..4d133659daa 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -1,14 +1,16 @@
 import $ from 'jquery';
 import '~/behaviors/markdown/render_gfm';
+import createFlash from '~/flash';
 import { __ } from '~/locale';
 import {
   REPO_BLOB_LOAD_VIEWER_START,
   REPO_BLOB_LOAD_VIEWER_FINISH,
   REPO_BLOB_LOAD_VIEWER,
+  REPO_BLOB_SWITCH_TO_VIEWER_START,
+  REPO_BLOB_SWITCH_VIEWER,
 } from '~/performance/constants';
 import { performanceMarkAndMeasure } from '~/performance/utils';
 import { fixTitle } from '~/tooltips';
-import { deprecatedCreateFlash as Flash } from '../../flash';
 import axios from '../../lib/utils/axios_utils';
 import { handleLocationHash } from '../../lib/utils/common_utils';
 import eventHub from '../../notes/event_hub';
@@ -21,6 +23,8 @@ const loadRichBlobViewer = (type) => {
       return import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer');
     case 'openapi':
       return import(/* webpackChunkName: 'openapi_viewer' */ '../openapi_viewer');
+    case 'csv':
+      return import(/* webpackChunkName: 'csv_viewer' */ '../csv_viewer');
     case 'pdf':
       return import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer');
     case 'sketch':
@@ -38,13 +42,18 @@ export const handleBlobRichViewer = (viewer, type) => {
   loadRichBlobViewer(type)
     .then((module) => module?.default(viewer))
     .catch((error) => {
-      Flash(__('Error loading file viewer.'));
+      createFlash({
+        message: __('Error loading file viewer.'),
+      });
       throw error;
     });
 };
 
 export default class BlobViewer {
   constructor() {
+    performanceMarkAndMeasure({
+      mark: REPO_BLOB_LOAD_VIEWER_START,
+    });
     const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
     const type = viewer?.dataset?.richType;
     BlobViewer.initAuxiliaryViewer();
@@ -137,7 +146,7 @@ export default class BlobViewer {
 
   switchToViewer(name) {
     performanceMarkAndMeasure({
-      mark: REPO_BLOB_LOAD_VIEWER_START,
+      mark: REPO_BLOB_SWITCH_TO_VIEWER_START,
     });
     const newViewer = this.$fileHolder[0].querySelector(`.blob-viewer[data-type='${name}']`);
     if (this.activeViewer === newViewer) return;
@@ -167,11 +176,15 @@ export default class BlobViewer {
     BlobViewer.loadViewer(newViewer)
       .then((viewer) => {
         $(viewer).renderGFM();
+        window.requestIdleCallback(() => {
+          this.$fileHolder.trigger('highlight:line');
+          handleLocationHash();
 
-        this.$fileHolder.trigger('highlight:line');
-        handleLocationHash();
+          viewer.setAttribute('data-loaded', 'true');
+          this.toggleCopyButtonState();
+          eventHub.$emit('showBlobInteractionZones', viewer.dataset.path);
+        });
 
-        this.toggleCopyButtonState();
         performanceMarkAndMeasure({
           mark: REPO_BLOB_LOAD_VIEWER_FINISH,
           measures: [
@@ -179,10 +192,18 @@ export default class BlobViewer {
               name: REPO_BLOB_LOAD_VIEWER,
               start: REPO_BLOB_LOAD_VIEWER_START,
             },
+            {
+              name: REPO_BLOB_SWITCH_VIEWER,
+              start: REPO_BLOB_SWITCH_TO_VIEWER_START,
+            },
           ],
         });
       })
-      .catch(() => new Flash(__('Error loading viewer')));
+      .catch(() =>
+        createFlash({
+          message: __('Error loading viewer'),
+        }),
+      );
   }
 
   static loadViewer(viewerParam) {
@@ -197,9 +218,10 @@ export default class BlobViewer {
 
     return axios.get(url).then(({ data }) => {
       viewer.innerHTML = data.html;
-      viewer.setAttribute('data-loaded', 'true');
 
-      eventHub.$emit('showBlobInteractionZones', viewer.dataset.path);
+      window.requestIdleCallback(() => {
+        viewer.removeAttribute('data-loading');
+      });
 
       return viewer;
     });