diff --git a/assets/javascripts/running.js b/assets/javascripts/running.js
index 65f9cc6efbc2..72bc350008cb 100644
--- a/assets/javascripts/running.js
+++ b/assets/javascripts/running.js
@@ -321,13 +321,16 @@ 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
+    document.getElementById('liveview-loading').style.display = 'none';
   };
   scrn.src = dataURL;
 }
diff --git a/t/ui/18-tests-details.t b/t/ui/18-tests-details.t
index b16c6062fc99..b8c1ea4891d6 100644
--- a/t/ui/18-tests-details.t
+++ b/t/ui/18-tests-details.t
@@ -4,6 +4,7 @@
 # SPDX-License-Identifier: GPL-2.0-or-later
 
 use Test::Most;
+use Mojo::Base -strict, -signatures;
 
 use DateTime;
 use FindBin;
@@ -75,14 +76,26 @@ my $baseurl = $driver->get_current_url;
 sub current_tab { $driver->find_element('.nav.nav-tabs .active')->get_text }
 
 # returns the contents of the candidates combo box as hash (key: tag, value: array of needle names)
-sub find_candidate_needles {
+sub find_candidate_needles ($trigger_function) {
+    $trigger_function->();
     # ensure the candidates menu is visible
     my $candidates_menu = wait_for_element(selector => '#candidatesMenu', is_displayed => 1) or return {};
+
     # save implicit waiting time as long as we are only looking for elements
     # that should be visible already
     disable_timeout;
-    return {} unless $candidates_menu->is_enabled;
-    $candidates_menu->click;
+    eval {
+        return {} unless $candidates_menu->is_enabled;
+        $candidates_menu->click;
+    };
+    if (my $error = $@) {
+        BAIL_OUT($error) unless $error =~ m/stale/;
+        $driver->capture_screenshot('stale_candidates_menu.png');
+        $trigger_function->();
+        $candidates_menu = wait_for_element(selector => '#candidatesMenu', is_displayed => 1) or return {};
+        return {} unless $candidates_menu->is_enabled;
+        $candidates_menu->click;
+    }
 
     # read the tags/needles from the HTML structure
     my @section_elements = $driver->find_elements('#needlediff_selector ul table');
@@ -150,8 +163,10 @@ subtest 'show job modules execution time' => sub {
 };
 
 subtest 'displaying image result with candidates' => sub {
-    $driver->find_element('[href="#step/bootloader/1"]')->click();
-    my $needles = find_candidate_needles;
+    my $trigger_function = sub {
+        $driver->find_element('[href="#step/bootloader/1"]')->click();
+    };
+    my $needles = find_candidate_needles($trigger_function);
     is_deeply($needles, {'inst-bootmenu' => []}, 'correct tags displayed') or diag explain $needles;
 };
 
@@ -311,6 +326,40 @@ 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');
+        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 sub {
+            !$loading_element->is_displayed();
+        }, 'liveview-loading is hidden after live view starts', 5;
+        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');
+        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,
@@ -608,8 +657,10 @@ sub test_with_error {
 
     # check whether candidates are displayed as expected
     my $random_number = int(rand(100000));
-    $driver->get("/tests/99946?prevent_caching=$random_number#step/yast2_lan/1");
-    is_deeply(find_candidate_needles, $expect, $test_name // 'candidates displayed as expected');
+    my $trigger_function = sub {
+        $driver->get("/tests/99946?prevent_caching=$random_number#step/yast2_lan/1");
+    };
+    is_deeply(find_candidate_needles($trigger_function), $expect, $test_name // 'candidates displayed as expected');
 }
 
 subtest 'test candidate list' => sub {
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>