diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/features/messages.js | 4 | ||||
| -rw-r--r-- | src/style.css | 2 |
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); } |