Load balsamiq viewer async

6 files changed, 16 insertions, 7 deletions

diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
index cdbfe36ca1c..6b0d1252346 100644
--- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
@@ -45,6 +45,7 @@ class BalsamiqViewer {
     container.classList.add('list-inline');
     container.classList.add('previews');
 
+    this.viewer.innerHTML = '';
     this.viewer.appendChild(container);
   }
 
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js
index 1dacf84470f..546a151a3f7 100644
--- a/app/assets/javascripts/blob/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@@ -1,6 +1,8 @@
 import BalsamiqViewer from './balsamiq/balsamiq_viewer';
 
-document.addEventListener('DOMContentLoaded', () => {
+function loadBalsamiqViewer() {
   const balsamiqViewer = new BalsamiqViewer(document.getElementById('js-balsamiq-viewer'));
   balsamiqViewer.loadFile();
-});
+}
+
+$(document).ready(loadBalsamiqViewer);
diff --git a/app/helpers/javascript_helper.rb b/app/helpers/javascript_helper.rb
index d5e77c7e271..f121207b0a8 100644
--- a/app/helpers/javascript_helper.rb
+++ b/app/helpers/javascript_helper.rb
@@ -4,7 +4,7 @@ module JavascriptHelper
   end
 
   # deprecated; use webpack_bundle_tag directly instead
-  def page_specific_javascript_bundle_tag(bundle)
-    webpack_bundle_tag(bundle)
+  def page_specific_javascript_bundle_tag(bundle, opts = {})
+    webpack_bundle_tag(bundle, opts)
   end
 end
diff --git a/app/helpers/webpack_helper.rb b/app/helpers/webpack_helper.rb
index 6bacda9fe75..3c396bcddea 100644
--- a/app/helpers/webpack_helper.rb
+++ b/app/helpers/webpack_helper.rb
@@ -1,8 +1,8 @@
 require 'webpack/rails/manifest'
 
 module WebpackHelper
-  def webpack_bundle_tag(bundle)
-    javascript_include_tag(*gitlab_webpack_asset_paths(bundle))
+  def webpack_bundle_tag(bundle, opts = {})
+    javascript_include_tag(*gitlab_webpack_asset_paths(bundle), opts)
   end
 
   # override webpack-rails gem helper until changes can make it upstream
diff --git a/app/views/projects/blob/viewers/_balsamiq.html.haml b/app/views/projects/blob/viewers/_balsamiq.html.haml
index 28670e7de97..7d0512b80b1 100644
--- a/app/views/projects/blob/viewers/_balsamiq.html.haml
+++ b/app/views/projects/blob/viewers/_balsamiq.html.haml
@@ -1,4 +1,6 @@
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('balsamiq_viewer')
+  = page_specific_javascript_bundle_tag('balsamiq_viewer', async: true)
 
 .file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: blob_raw_url } }
+  .text-center.prepend-top-default.append-bottom-default
+    = icon('spinner spin 2x', 'aria-hidden' => 'true')
diff --git a/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
index 85816ee1f11..2e58d202f81 100644
--- a/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
+++ b/spec/javascripts/blob/balsamiq/balsamiq_viewer_spec.js
@@ -105,6 +105,10 @@ describe('BalsamiqViewer', () => {
       expect(container.classList[1]).toBe('previews');
     });
 
+    it('should clear viewer.innerHTML', () => {
+      expect(viewer.innerHTML).toEqual('');
+    });
+
     it('should call viewer.appendChild', () => {
       expect(viewer.appendChild).toHaveBeenCalledWith(container);
     });