fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(helpdesk): replace generic loading with card-shaped skeleton placeholders

Browse Source 
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>
This commit is contained in:
Felix Schneider
2026-04-05 20:19:11 +02:00
parent e819e235a2
commit b82cef31a6
3 changed files with 80 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
modules/helpdesk/pages/helpdesk/team/index(default).phtml
View File

@@ -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>

61
modules/helpdesk/web/css/helpdesk.css
View File

@@ -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);

1
modules/helpdesk/web/js/helpdesk-team.js
View File

@@ -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) {