Profiles: the Following / Followers counts no longer flash a dash before they load — the number's place is held by an invisible stand-in and the real count fades in over it

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MgAFLnkF7KrdhuyCLMNgtL

2 files changed, 5 insertions, 1 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 3a65725..38e533b 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -5338,10 +5338,12 @@ export function messagesFeature(ctx) {
       else loadFollowers(pk);
       render();
     };
+    // not known yet: an invisible stand-in holds the place, and the number
+    // fades in over it (no dash flashing first)
     const btn = (which, n, label) => h('button', {
       type: 'button', class: 'social-count' + (ui.profPeople === which ? ' on' : ''), 'aria-expanded': String(ui.profPeople === which),
       onClick: () => pick(which),
-    }, h('b', {}, n == null ? '–' : compactNum(n)), ' ', label);
+    }, h('b', { class: 'social-n' + (n == null ? ' pending' : '') }, n == null ? '0' : compactNum(n)), ' ', label);
     const shown = ui.npubShown === pk;
     return h('div', { class: 'row social-line' },
       btn('following', follows, t('profFollowing')),
diff --git a/src/style.css b/src/style.css
index 7a8d3c0..1306f24 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1438,6 +1438,8 @@ body::after {
   font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; border-radius: 0;
 }
 .social-count b { color: var(--ink); font-weight: 650; }
+.social-count .social-n { transition: opacity .25s; }
+.social-count .social-n.pending { opacity: 0; }
 .social-count:hover { background: none; color: var(--ink); }
 .social-count.on { color: var(--ink); border-bottom-color: var(--accent); }