Add loading indicator to the test liveview

This PR removes the empty box which was visible in the webui before liveview content is received by the responsible canvas element.
It also adds a loading animation indicating that the liveview is being loaded.

Related Issue: https://progress.opensuse.org/issues/134840

assets/javascripts/running.js

@@ -321,18 +321,29 @@ var last_event;
 function loadCanvas(canvas, dataURL) {
   var context = canvas.getContext('2d');
 
-  // load image from data url
+  // Load image from data URL
   var scrn = new Image();
   scrn.onload = function () {
     canvas.width = this.width;
     canvas.height = this.height;
     context.clearRect(0, 0, this.width, this.width);
     context.drawImage(this, 0, 0);
+
+    // Hide loading animation after the first image is loaded
+    var loadingElement = document.getElementById('liveview-loading');
+    if (loadingElement) {
+      loadingElement.style.display = 'none';
+    }
   };
   scrn.src = dataURL;
 }
 
 function initLivestream() {
+  // Show the loading animation when initializing the live stream
+  var loadingElement = document.getElementById('liveview-loading');
+  if (loadingElement) {
+    loadingElement.style.display = 'block';
+  }
   // setup callback for livestream
   const livestream = document.getElementById('livestream');
   const servicePortDelta = Number.parseInt(document.getElementById('developer-panel').dataset.servicePortDelta);

assets/stylesheets/result_preview.scss

@@ -91,7 +91,6 @@
     // live view
     canvas {
         max-width: 100%;
-        border: #ddd 1px solid;
     }
 }
 

templates/webapi/test/live.html.ep

@@ -193,6 +193,13 @@
 </div>
 
 <div id="canholder">
+  <div id="liveview-loading">
+    <div class="d-flex justify-content-center">
+      <i class="fa fa-circle-o-notch fa-spin fa-4x" role="status">
+        <span class="sr-only">Loading…</span>
+      </i>
+    </div>
+  </div>
   <canvas id="livestream" data-url="/liveviewhandler/tests/<%= $testid %>/streaming">
   </canvas>
 </div>