release: 4.6.123 streamer-profile-skel-block variants

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.122",
+  "version": "4.6.123",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.122",
+      "version": "4.6.123",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.122",
+  "version": "4.6.123",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

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 name"></div>
-                <div class="streamer-profile-skel-block" style="width:90px; height:18px; border-radius:10px;"></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-skel-block subtitle"></div>
-            <div class="streamer-profile-stats" style="margin-top:8px;">
+            <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>

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