From 6fd7b0bf614fac89beacd1c863fcee913e8e0903 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Sat, 18 Jul 2026 20:04:56 +0100
Subject: [PATCH] fix(tasks): use canonical section loader for task-log loading
 state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The task-log "Loading logs..." state rendered as a bare left-aligned text
line (or a tiny ad-hoc 16px spinner overlay), which read as unfinished next
to the rest of the UI. Swap all three log-loading spots (initial placeholder,
toggle-open fetch, running-task stream placeholder) to the canonical
window.lpLoadingBox('Loading logs…'), and scope .lp-loading inside the log
terminal box to fill it and drop its own card chrome so the spinner sits dead
centre over the terminal surface instead of a box-in-a-box. Widen the stream
overlay-removal selector to also clear .lp-loading.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../frontend/components/tasks/css/tasks.css         | 13 +++++++++++++
 .../components/tasks/js/tasks-list-render.js        |  2 +-
 .../components/tasks/js/tasks-log-stream.js         |  8 +++++---
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/containers/libreportal/frontend/components/tasks/css/tasks.css b/containers/libreportal/frontend/components/tasks/css/tasks.css
index 4267e87..47af0ca 100644
--- a/containers/libreportal/frontend/components/tasks/css/tasks.css
+++ b/containers/libreportal/frontend/components/tasks/css/tasks.css
@@ -640,6 +640,19 @@
   border: 1px solid rgba(var(--text-rgb), 0.10);
 }
 
+/* Canonical section loader (window.lpLoadingBox) inside a task-log
+   terminal box: fill the whole container and centre the spinner over the
+   terminal surface, dropping the loader's own card chrome so it reads as
+   one panel rather than a box-in-a-box. */
+.task-logs .log-container .lp-loading {
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+}
+
 .meta-item {
   display: flex;
   align-items: baseline;
diff --git a/containers/libreportal/frontend/components/tasks/js/tasks-list-render.js b/containers/libreportal/frontend/components/tasks/js/tasks-list-render.js
index 8fe6bda..7980263 100644
--- a/containers/libreportal/frontend/components/tasks/js/tasks-list-render.js
+++ b/containers/libreportal/frontend/components/tasks/js/tasks-list-render.js
@@ -259,7 +259,7 @@ Object.assign(TasksManager.prototype, {
             <div class="log-container terminal-style" id="logs-${task.id}" style="height: 200px; overflow-y: auto; position: relative;">
               ${hasLogs ?
                 task.log.map(log => `<div class="log-entry">${this.taskManager.parseAnsiColors(log)}</div>`).join('') :
-                '<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 18, 36, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10;"><div class="loading-spinner" style="width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.18); border-top: 2px solid #fff; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px;"></div>Loading logs...</div></div>'
+                ((typeof window.lpLoadingBox === 'function') ? window.lpLoadingBox('Loading logs…') : '<div class="log-entry">Loading logs…</div>')
               }
             </div>
           </div>
diff --git a/containers/libreportal/frontend/components/tasks/js/tasks-log-stream.js b/containers/libreportal/frontend/components/tasks/js/tasks-log-stream.js
index b5064e9..27db66c 100644
--- a/containers/libreportal/frontend/components/tasks/js/tasks-log-stream.js
+++ b/containers/libreportal/frontend/components/tasks/js/tasks-log-stream.js
@@ -22,7 +22,7 @@ Object.assign(TasksManager.prototype, {
     const render = () => {
       const logsContainer = document.getElementById(`logs-${taskId}`);
       if (!logsContainer) return;
-      const overlay = logsContainer.querySelector('div[style*="position: absolute"]');
+      const overlay = logsContainer.querySelector('.lp-loading, div[style*="position: absolute"]');
       if (overlay) overlay.remove();
       let preElement = logsContainer.querySelector('pre.output-content');
       if (!preElement) {
@@ -114,7 +114,9 @@ Object.assign(TasksManager.prototype, {
         return true;
       };
 
-      logsContainer.innerHTML = '<div class="log-entry">🔄 Loading logs...</div>';
+      logsContainer.innerHTML = (typeof window.lpLoadingBox === 'function')
+        ? window.lpLoadingBox('Loading logs…')
+        : '<div class="log-entry">Loading logs…</div>';
       const isScrolledToBottom = logsContainer.scrollHeight - logsContainer.scrollTop <= logsContainer.clientHeight + 10;
 
       const logResponse = await fetch(`/read-file?path=tasks/${taskId}.log`);
@@ -276,7 +278,7 @@ Object.assign(TasksManager.prototype, {
       const logsHtml = `
         <div class="task-logs">
           <div class="log-container terminal-style" id="logs-${taskId}" style="height: 200px; overflow-y: auto; position: relative;">
-            <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 18, 36, 0.85); display: flex; align-items: center; justify-content: center; z-index: 10;"><div class="loading-spinner" style="width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.18); border-top: 2px solid #fff; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px;"></div>Loading logs...</div></div>
+            ${(typeof window.lpLoadingBox === 'function') ? window.lpLoadingBox('Loading logs…') : '<div class="log-entry">Loading logs…</div>'}
           </div>
         </div>
       `;