orbit/orbit
orbit/orbit
0
0
Fork 0
Code Issues 3 Pull requests 5 Projects Releases Packages Wiki Activity Actions

MemberList: browser-native virtualization for large channels

Browse source 
Off-screen member rows now skip layout & paint via content-visibility,
with contain-intrinsic-size for correct scrollbar sizing (yomirc gets a
smaller estimate). A 2k-member panel only renders the visible rows; small
channels are unchanged. Together with the earlier per-message re-render
fixes, this closes the large-channel lag (layout/paint + re-render cost).
This commit is contained in:
reverse 2026-06-20 18:01:25 +00:00
parent 668e2aec78
commit ea133001f1
2 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/sw.js
View file

@ -1,7 +1,7 @@
// Tchatou service worker — installable PWA + offline app shell.
// Scope: /app/. Only handles same-origin /app/ GETs; the IRC websocket and all
// API calls (cloudflare, change_password, upload) pass straight through.
const CACHE = 'tchatou-v53';
const CACHE = 'tchatou-v54';
const SHELL = ['/app/', '/app/index.html', '/app/favicon.svg', '/app/orbit-icon.svg', '/app/manifest.webmanifest'];
self.addEventListener('install', (e) => {

11
src/index.css
View file

@ -1695,3 +1695,14 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
background: var(--green); color: #fff; padding: .6rem 1rem; border-radius: 0 0 12px 12px;
font-weight: 600; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 0; }
/* ── Large-channel virtualization (browser-native) ──────────────────────────
Member rows skip layout & paint while off-screen, so a 2,000-member panel
only does real rendering work for the handful of visible rows — the rest cost
~nothing until scrolled into view. contain-intrinsic-size gives off-screen
rows a placeholder height (so the scrollbar is right); `auto` makes the
browser remember each row's real height after it first renders. Visible rows
render exactly as before, so small channels are unchanged. Degrades to normal
rendering on browsers without content-visibility. */
.member { content-visibility: auto; contain-intrinsic-size: auto 44px; }
[data-theme^="yomirc"] .member { contain-intrinsic-size: auto 20px; }