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

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