From 3fa49a5283b8aa8e440658e284ec9cdc6538dec6 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 09:17:23 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20profile-skeleton=20block=20variants?=
 =?UTF-8?q?=20=E2=80=94=205=20inline=20width/height=20styles=20gone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/renderer-profile.ts | 10 +++++-----
 src/styles.css          | 31 +++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/renderer-profile.ts b/src/renderer-profile.ts
index 92152e1..469a780 100644
--- a/src/renderer-profile.ts
+++ b/src/renderer-profile.ts
@@ -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>
diff --git a/src/styles.css b/src/styles.css
index 782306f..786f816 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -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; }