Merge branch 'force-two-up-view' into 'master'

Force two up view

Closes #32613

See merge request gitlab-org/gitlab-ce!14397

2 files changed, 19 insertions, 6 deletions

diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index bb33e9eb783..4763985c802 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -11,14 +11,22 @@
     function ImageFile(file) {
       this.file = file;
       this.requestImageInfo($('.two-up.view .frame.deleted img', this.file), (function(_this) {
-        // Determine if old and new file has same dimensions, if not show 'two-up' view
         return function(deletedWidth, deletedHeight) {
           return _this.requestImageInfo($('.two-up.view .frame.added img', _this.file), function(width, height) {
-            if (width === deletedWidth && height === deletedHeight) {
-              return _this.initViewModes();
-            } else {
-              return _this.initView('two-up');
-            }
+            _this.initViewModes();
+
+            // Load two-up view after images are loaded
+            // so that we can display the correct width and height information
+            const images = $('.two-up.view img', _this.file);
+            let loadedCount = 0;
+
+            images.on('load', () => {
+              loadedCount += 1;
+
+              if (loadedCount === images.length) {
+                _this.initView('two-up');
+              }
+            });
           });
         };
       })(this));
diff --git a/changelogs/unreleased/force-two-up-view.yml b/changelogs/unreleased/force-two-up-view.yml
new file mode 100644
index 00000000000..1074eb384bb
--- /dev/null
+++ b/changelogs/unreleased/force-two-up-view.yml
@@ -0,0 +1,5 @@
+---
+title: Force two up view to load by default for image diffs
+merge_request:
+author:
+type: fixed