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.

templates/repo/diff/image_diff.tmpl

@@ -11,7 +11,7 @@
 					{{end}}
 				</div>
 			</div>
-			<div class="gt-hidden">
+			<div class="image-diff-tabs is-loading">
 				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{.file.Index}}">
 					<div class="diff-side-by-side">
 						{{if .blobBase}}
@@ -63,10 +63,8 @@
 				</div>
 				<div class="ui bottom attached tab image-diff-container" data-tab="diff-overlay-{{.file.Index}}">
 					<div class="diff-overlay">
+						<input type="range" min="0" max="100" value="50">
 						<div class="overlay-frame">
-							<div class="ui centered">
-								<input type="range" min="0" max="100" value="50">
-							</div>
 							<span class="before-container"><img class="image-before"></span>
 							<span class="after-container"><img class="image-after"></span>
 						</div>
@@ -74,7 +72,6 @@
 				</div>
 				{{end}}
 			</div>
-			<div class="ui active centered inline loader gt-mb-4"></div>
 		</div>
 	</td>
 </tr>

web_src/css/features/imagediff.css

@@ -1,6 +1,14 @@
+.image-diff-tabs {
+  min-height: 60px;
+
+}
+.image-diff-tabs.is-loading .tab {
+  display: none;
+}
+
 .image-diff-container {
   text-align: center;
-  padding: 1em 0;
+  padding: 0.5em 0 1em;
 }
 
 .image-diff-container img {
@@ -31,6 +39,7 @@
 
 .image-diff-container .diff-swipe {
   margin: auto;
+  padding: 1em 0;
 }
 
 .image-diff-container .diff-swipe .swipe-frame {
@@ -89,7 +98,7 @@
 }
 
 .image-diff-container .diff-overlay .overlay-frame {
-  margin: 0 auto;
+  margin: 1em auto 0;
   position: relative;
 }
 

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']");