From b82cef31a60e716c36b05db1d930667a62cb74de Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Sun, 5 Apr 2026 20:19:11 +0200
Subject: [PATCH] fix(helpdesk): replace generic loading with card-shaped
 skeleton placeholders

Skeleton loading now mirrors the actual agent card layout: bordered card
with header (avatar circle + name bar + badge) and three table-like rows.
Removes aria-busy toggle from JS. Three skeleton cards shown during load.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/helpdesk/team/index(default).phtml  | 21 ++++++-
 modules/helpdesk/web/css/helpdesk.css         | 61 +++++++++++++++++++
 modules/helpdesk/web/js/helpdesk-team.js      |  1 -
 3 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/modules/helpdesk/pages/helpdesk/team/index(default).phtml b/modules/helpdesk/pages/helpdesk/team/index(default).phtml
index 7a4f2bb..8f96574 100644
--- a/modules/helpdesk/pages/helpdesk/team/index(default).phtml
+++ b/modules/helpdesk/pages/helpdesk/team/index(default).phtml
@@ -53,9 +53,26 @@ $periodLabels = [
     ?>
 
     <div class="helpdesk-team-dashboard">
-      <div id="team-loading" aria-busy="true">
+      <div id="team-loading">
         <?php for ($i = 0; $i < 3; $i++): ?>
-          <div class="helpdesk-skeleton" style="height: 5rem; margin-bottom: 0.75rem; border-radius: var(--app-radius, 0.375rem);"></div>
+          <div class="helpdesk-team-skeleton-card">
+            <div class="helpdesk-team-skeleton-header">
+              <div class="helpdesk-skeleton helpdesk-team-skeleton-avatar"></div>
+              <div class="helpdesk-skeleton helpdesk-team-skeleton-name"></div>
+              <div class="helpdesk-skeleton helpdesk-team-skeleton-badge"></div>
+            </div>
+            <div class="helpdesk-team-skeleton-rows">
+              <?php for ($j = 0; $j < 3; $j++): ?>
+                <div class="helpdesk-team-skeleton-row">
+                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-sm"></div>
+                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-md"></div>
+                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-lg"></div>
+                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-sm"></div>
+                  <div class="helpdesk-skeleton helpdesk-team-skeleton-cell-sm"></div>
+                </div>
+              <?php endfor; ?>
+            </div>
+          </div>
         <?php endfor; ?>
       </div>
 
diff --git a/modules/helpdesk/web/css/helpdesk.css b/modules/helpdesk/web/css/helpdesk.css
index 456dd9e..6d4b6de 100644
--- a/modules/helpdesk/web/css/helpdesk.css
+++ b/modules/helpdesk/web/css/helpdesk.css
@@ -126,6 +126,67 @@
     }
   }
 
+  /* Team workload — skeleton loading */
+  .helpdesk-team-skeleton-card {
+    border: 1px solid var(--app-muted-border-color);
+    border-radius: var(--app-radius, 0.375rem);
+    overflow: hidden;
+    margin-bottom: calc(var(--app-spacing) * 0.5);
+  }
+
+  .helpdesk-team-skeleton-header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--app-spacing) * 0.5);
+    padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.75);
+    background: color-mix(in srgb, var(--app-muted-border-color) 15%, transparent);
+    border-bottom: 1px solid var(--app-muted-border-color);
+  }
+
+  .helpdesk-team-skeleton-avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .helpdesk-team-skeleton-name {
+    height: 0.85rem;
+    width: 10rem;
+  }
+
+  .helpdesk-team-skeleton-badge {
+    height: 1.1rem;
+    width: 2rem;
+    border-radius: 999px;
+    margin-left: auto;
+  }
+
+  .helpdesk-team-skeleton-rows {
+    padding: calc(var(--app-spacing) * 0.35) calc(var(--app-spacing) * 0.5);
+  }
+
+  .helpdesk-team-skeleton-row {
+    display: flex;
+    gap: calc(var(--app-spacing) * 0.5);
+    padding: calc(var(--app-spacing) * 0.3) 0;
+  }
+
+  .helpdesk-team-skeleton-cell-sm {
+    height: 0.7rem;
+    width: 5rem;
+  }
+
+  .helpdesk-team-skeleton-cell-md {
+    height: 0.7rem;
+    width: 10rem;
+  }
+
+  .helpdesk-team-skeleton-cell-lg {
+    height: 0.7rem;
+    flex: 1;
+  }
+
   /* Team workload — agent widget card */
   .helpdesk-team-widget {
     border: 1px solid var(--app-muted-border-color);
diff --git a/modules/helpdesk/web/js/helpdesk-team.js b/modules/helpdesk/web/js/helpdesk-team.js
index 6f76654..7a06ac7 100644
--- a/modules/helpdesk/web/js/helpdesk-team.js
+++ b/modules/helpdesk/web/js/helpdesk-team.js
@@ -29,7 +29,6 @@ if (container) {
     if (elError) elError.hidden = state !== 'error';
     if (elEmpty) elEmpty.hidden = state !== 'empty';
     if (elContent) elContent.hidden = state !== 'success';
-    if (elLoading) elLoading.setAttribute('aria-busy', state === 'loading' ? 'true' : 'false');
   }
 
   function h(tag, cls, text) {