From b3cf4c3bf91fac2f2ea910aea195e923cf047c18 Mon Sep 17 00:00:00 2001
From: "robert.richardson" <robert.richardson@suse.com>
Date: Wed, 23 Oct 2024 15:39:07 +0200
Subject: [PATCH] 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.
Test cases are also added to confirm the elements are displayed and hidden as expected.

Related Issue: https://progress.opensuse.org/issues/134840
---
 assets/javascripts/running.js          | 13 +++++++-
 assets/stylesheets/result_preview.scss |  1 -
 t/ui/18-tests-details.t                | 44 ++++++++++++++++++++++++++
 templates/webapi/test/live.html.ep     |  7 ++++
 4 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/assets/javascripts/running.js b/assets/javascripts/running.js
index 65f9cc6efbc2..37eafac448e0 100644
--- a/assets/javascripts/running.js
+++ b/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);
diff --git a/assets/stylesheets/result_preview.scss b/assets/stylesheets/result_preview.scss
index 8b9936cc1b25..56f02e0724b4 100644
--- a/assets/stylesheets/result_preview.scss
+++ b/assets/stylesheets/result_preview.scss
@@ -91,7 +91,6 @@
     // live view
     canvas {
         max-width: 100%;
-        border: #ddd 1px solid;
     }
 }
 
diff --git a/t/ui/18-tests-details.t b/t/ui/18-tests-details.t
index b16c6062fc99..836f17a5693b 100644
--- a/t/ui/18-tests-details.t
+++ b/t/ui/18-tests-details.t
@@ -311,6 +311,50 @@ subtest 'running job' => sub {
     # waiting for the periodic call anyways
     $driver->execute_script('window.enableStatusUpdates = false');
 
+    subtest 'liveview loading animation is displayed' => sub {
+        $driver->find_element_by_link_text('Details')->click();
+        like(current_tab, qr/details/i, 'switched to details tab');
+
+        $driver->find_element_by_link_text('Live View')->click();
+        like(current_tab, qr/live/i, 'switched back to live tab');
+
+        my $loading_element = $driver->find_element('#liveview-loading', 'css');
+        ok($loading_element, 'liveview-loading element exists after tab switch');
+
+        ok($loading_element->is_displayed(), 'liveview-loading is visible after tab switch');
+    };
+    subtest 'liveview loading animation hides after live view starts' => sub {
+        my $loading_element = $driver->find_element('#liveview-loading');
+        ok($loading_element->is_displayed(), 'liveview-loading is initially visible');
+
+        # simulate the live view starting
+        $driver->execute_script(
+            q{
+            var canvas = document.getElementById('livestream');
+            var dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=';
+            loadCanvas(canvas, dataURL);
+        }
+        );
+        # wait until the loading animation is hidden
+        wait_until sub {
+            my $loading_element = $driver->find_element('#liveview-loading');
+            !$loading_element->is_displayed();
+        }, 'liveview-loading is hidden after live view starts', 5;
+        # verify that the canvas is now displayed
+        my $canvas = $driver->find_element('#livestream');
+        ok($canvas->is_displayed(), 'livestream canvas is displayed');
+
+        $driver->find_element_by_link_text('Details')->click();
+        like(current_tab, qr/details/i, 'switched to details tab');
+
+        $driver->find_element_by_link_text('Live View')->click();
+        like(current_tab, qr/live/i, 'switched back to live tab');
+
+        $loading_element = $driver->find_element('#liveview-loading', 'css');
+        ok($loading_element, 'liveview-loading element exists after tab switch');
+
+        ok(!$loading_element->is_displayed(), 'liveview-loading is still hidden after tab switch');
+    };
     subtest 'info panel contents' => sub {
         like(
             $driver->find_element('#assigned-worker')->get_text,
diff --git a/templates/webapi/test/live.html.ep b/templates/webapi/test/live.html.ep
index e126c890cb32..8edc70f242ee 100644
--- a/templates/webapi/test/live.html.ep
+++ b/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>