Improve Image Diff UI (#26696)

1. Use `is-loading` instead of `ui loader`
2. Introduce class name `image-diff-tabs`, instead of searching `gt-hidden`, which is fragile
3. Align the UI elements, see the screenshots.

1 files changed, 3 insertions, 4 deletions

diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js
index 2e7baab79f..23b048f295 100644
--- a/web_src/js/features/imagediff.js
+++ b/web_src/js/features/imagediff.js
@@ -130,8 +130,7 @@ export function initImageDiff() {
         initOverlay(createContext($imageAfter[2], $imageBefore[2]));
       }
 
-      $container.find('> .gt-hidden').removeClass('gt-hidden');
-      hideElem($container.find('.ui.loader'));
+      $container.find('> .image-diff-tabs').removeClass('is-loading');
     }
 
     function initSideBySide(sizes) {
@@ -205,7 +204,7 @@ export function initImageDiff() {
       });
       $container.find('.diff-swipe').css({
         width: sizes.max.width * factor + 2,
-        height: sizes.max.height * factor + 4
+        height: sizes.max.height * factor + 30 /* extra height for inner "position: absolute" elements */,
       });
       $container.find('.swipe-bar').on('mousedown', function(e) {
         e.preventDefault();
@@ -261,7 +260,7 @@ export function initImageDiff() {
       // the "css(width, height)" is somewhat hacky and not easy to understand, it could be improved in the future
       sizes.image2.parent().parent().css({
         width: sizes.max.width * factor + 2,
-        height: sizes.max.height * factor + 2 + 20 /* extra height for inner "position: absolute" elements */,
+        height: sizes.max.height * factor + 2,
       });
 
       const $range = $container.find("input[type='range']");