From 8187c9b4dd24af6f5787c6be6af0b7e4726d77ff Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Sun, 5 Apr 2026 23:03:13 +0200
Subject: [PATCH] feat(helpdesk): add skeleton loader and lightbox for image
 previews

- Skeleton shimmer placeholder shown while SOAP image loads
- onload hides skeleton, onerror hides entire preview
- data-fslightbox="ticket-files" on image link enables FsLightbox
  overlay (auto-detected by global MutationObserver)
- cursor: zoom-in on preview images
- Gallery name "ticket-files" groups all images in the feed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 modules/helpdesk/web/css/helpdesk.css             | 9 +++++++++
 modules/helpdesk/web/js/helpdesk-communication.js | 5 ++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/modules/helpdesk/web/css/helpdesk.css b/modules/helpdesk/web/css/helpdesk.css
index 4aaadf7..b8bfad6 100644
--- a/modules/helpdesk/web/css/helpdesk.css
+++ b/modules/helpdesk/web/css/helpdesk.css
@@ -1318,6 +1318,14 @@
     display: block;
     max-width: 16rem;
     margin-left: 1.35rem;
+    position: relative;
+  }
+
+  .helpdesk-chat-file-skeleton {
+    display: block;
+    width: 12rem;
+    height: 8rem;
+    border-radius: var(--app-radius, 0.375rem);
   }
 
   .helpdesk-chat-file-preview img {
@@ -1326,6 +1334,7 @@
     height: auto;
     border-radius: var(--app-radius, 0.375rem);
     border: 1px solid var(--app-muted-border-color);
+    cursor: zoom-in;
   }
 
   .helpdesk-chat-file-link {
diff --git a/modules/helpdesk/web/js/helpdesk-communication.js b/modules/helpdesk/web/js/helpdesk-communication.js
index e044a98..c080c92 100644
--- a/modules/helpdesk/web/js/helpdesk-communication.js
+++ b/modules/helpdesk/web/js/helpdesk-communication.js
@@ -126,7 +126,10 @@ export function renderCommunicationFeed(entries, options = {}) {
       html += `<span class="helpdesk-chat-activity-pill">${esc(actor)} ${esc(t('attached a file'))}`;
       if (timeLabel) html += ` ${esc(t('on'))} ${esc(timeLabel)}`;
       html += `</span>`;
-      html += `<a href="${esc(fileUrl)}" target="_blank" rel="noopener noreferrer" class="helpdesk-chat-file-preview" aria-label="${esc(fileName)}"><img src="${esc(imgUrl)}" alt="${esc(fileName)}" loading="lazy" onerror="this.parentElement.hidden=true"></a>`;
+      html += `<span class="helpdesk-chat-file-preview">`;
+      html += `<span class="helpdesk-chat-file-skeleton helpdesk-skeleton"></span>`;
+      html += `<a data-fslightbox="ticket-files" href="${esc(imgUrl)}" aria-label="${esc(fileName)}"><img src="${esc(imgUrl)}" alt="${esc(fileName)}" loading="lazy" onload="this.closest('.helpdesk-chat-file-preview').querySelector('.helpdesk-chat-file-skeleton').hidden=true" onerror="this.closest('.helpdesk-chat-file-preview').hidden=true"></a>`;
+      html += `</span>`;
       html += `<a href="${esc(fileUrl)}" target="_blank" rel="noopener noreferrer" class="helpdesk-chat-file-link"><i class="bi bi-download" aria-hidden="true"></i> ${esc(fileName)}</a>`;
       html += '</div>';
       html += '</li>';