diff --git a/assets/javascripts/running.js b/assets/javascripts/running.js
index 65f9cc6efbc..72bc350008c 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/assets/stylesheets/result_preview.scss b/assets/stylesheets/result_preview.scss
index 8b9936cc1b2..5560aa10c51 100644
--- a/assets/stylesheets/result_preview.scss
+++ b/assets/stylesheets/result_preview.scss
@@ -84,6 +84,7 @@
 }
 
 #canholder {
+    position: relative;
     text-align: center;
     width: 100%;
     margin-top: 10pt;
@@ -95,6 +96,14 @@
     }
 }
 
+#liveview-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10; /* Ensure it's above the canvas */
+}
+
 .needle-info-table {
     display: table;
     & > div {
diff --git a/t/ui/18-tests-details.t b/t/ui/18-tests-details.t
index b1d047f6343..415056670e7 100644
--- a/t/ui/18-tests-details.t
+++ b/t/ui/18-tests-details.t
@@ -312,6 +312,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,
diff --git a/templates/webapi/test/live.html.ep b/templates/webapi/test/live.html.ep
index e126c890cb3..8edc70f242e 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>