Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

cleanup: profile-skeleton block variants — 5 inline width/height styles gone

Browse Source 
The streamer profile loading skeleton (8 inline-styled div placeholders that preview the final card layout while data fetches) carried width/height/border-radius properties inline on every block. Four of those are pre-shaped slots that match a real layout element (avatar, name line, badge, subtitle), and one is the stats container margin — extracted to CSS classes:

- .streamer-profile-skel-block.avatar (88x88 round, flex-shrink:0)
- .streamer-profile-skel-block.name (180x24)
- .streamer-profile-skel-block.badge (90x18, 10px radius)
- .streamer-profile-skel-block.subtitle (60% x 14, margin-top:6px)
- .streamer-profile-skel-stats (the container's margin-top:8px)

The three stat-line placeholders (widths 100/80/120) keep their inline width: the slight variation is intentional visual texture so the skeleton doesn't look like three identical rectangles, and it's the only place where the inline value actually carries meaning.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 09:17:23 +02:00
parent a809676731
commit 3fa49a5283
2 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer-profile.ts
View File

@ -56,14 +56,14 @@ function renderStreamerProfileSkeleton(login: string): void {
el.classList.add('streamer-profile-skeleton');
el.style.display = 'flex';
applyProfileHtml(el, `
<div class="streamer-profile-skel-block" style="width:88px; height:88px; border-radius:50%; flex-shrink:0;"></div>
<div class="streamer-profile-skel-block avatar"></div>
<div class="streamer-profile-body">
<div class="streamer-profile-name-row">
<div class="streamer-profile-skel-block" style="width:180px; height:24px;"></div>
<div class="streamer-profile-skel-block" style="width:90px; height:18px; border-radius:10px;"></div>
<div class="streamer-profile-skel-block name"></div>
<div class="streamer-profile-skel-block badge"></div>
</div>
<div class="streamer-profile-skel-block" style="width:60%; height:14px; margin-top:6px;"></div>
<div class="streamer-profile-stats" style="margin-top:8px;">
<div class="streamer-profile-skel-block subtitle"></div>
<div class="streamer-profile-stats streamer-profile-skel-stats">
<div class="streamer-profile-skel-block" style="width:100px; height:14px;"></div>
<div class="streamer-profile-skel-block" style="width:80px; height:14px;"></div>
<div class="streamer-profile-skel-block" style="width:120px; height:14px;"></div>

31
src/styles.css
View File

@ -4214,6 +4214,37 @@ input[type="number"]::-webkit-outer-spin-button {
border-radius: 4px;
}
/* Pre-shaped skeleton block variants — each matches one of the
real-profile-card slots so the loading silhouette previews the
final layout. Replaces inline width/height/border-radius declarations. */
.streamer-profile-skel-block.avatar {
width: 88px;
height: 88px;
border-radius: 50%;
flex-shrink: 0;
}
.streamer-profile-skel-block.name {
width: 180px;
height: 24px;
}
.streamer-profile-skel-block.badge {
width: 90px;
height: 18px;
border-radius: 10px;
}
.streamer-profile-skel-block.subtitle {
width: 60%;
height: 14px;
margin-top: 6px;
}
.streamer-profile-skel-stats {
margin-top: 8px;
}
@keyframes profile-skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }