diff --git a/assets/javascripts/running.js b/assets/javascripts/running.js
index 65f9cc6efbc2..fb4bd3f0645d 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/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>