1 files changed, 31 insertions, 31 deletions

diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 4d133659daa..1bda7d4e3f0 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -36,6 +36,34 @@ const loadRichBlobViewer = (type) => {
   }
 };
 
+const loadViewer = (viewerParam) => {
+  const viewer = viewerParam;
+  const url = viewer.getAttribute('data-url');
+
+  if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+    return Promise.resolve(viewer);
+  }
+
+  viewer.setAttribute('data-loading', 'true');
+
+  return axios.get(url).then(({ data }) => {
+    viewer.innerHTML = data.html;
+
+    window.requestIdleCallback(() => {
+      viewer.removeAttribute('data-loading');
+    });
+
+    return viewer;
+  });
+};
+
+export const initAuxiliaryViewer = () => {
+  const auxiliaryViewer = document.querySelector('.blob-viewer[data-type="auxiliary"]');
+  if (!auxiliaryViewer) return;
+
+  loadViewer(auxiliaryViewer);
+};
+
 export const handleBlobRichViewer = (viewer, type) => {
   if (!viewer || !type) return;
 
@@ -49,27 +77,20 @@ export const handleBlobRichViewer = (viewer, type) => {
     });
 };
 
-export default class BlobViewer {
+export 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();
+    initAuxiliaryViewer();
 
     handleBlobRichViewer(viewer, type);
 
     this.initMainViewers();
   }
 
-  static initAuxiliaryViewer() {
-    const auxiliaryViewer = document.querySelector('.blob-viewer[data-type="auxiliary"]');
-    if (!auxiliaryViewer) return;
-
-    BlobViewer.loadViewer(auxiliaryViewer);
-  }
-
   initMainViewers() {
     this.$fileHolder = $('.file-holder');
     if (!this.$fileHolder.length) return;
@@ -173,7 +194,7 @@ export default class BlobViewer {
     this.activeViewer = newViewer;
 
     this.toggleCopyButtonState();
-    BlobViewer.loadViewer(newViewer)
+    loadViewer(newViewer)
       .then((viewer) => {
         $(viewer).renderGFM();
         window.requestIdleCallback(() => {
@@ -205,25 +226,4 @@ export default class BlobViewer {
         }),
       );
   }
-
-  static loadViewer(viewerParam) {
-    const viewer = viewerParam;
-    const url = viewer.getAttribute('data-url');
-
-    if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
-      return Promise.resolve(viewer);
-    }
-
-    viewer.setAttribute('data-loading', 'true');
-
-    return axios.get(url).then(({ data }) => {
-      viewer.innerHTML = data.html;
-
-      window.requestIdleCallback(() => {
-        viewer.removeAttribute('data-loading');
-      });
-
-      return viewer;
-    });
-  }
 }