Derek Ross opened merge request !14: perf: Optimize Popular page load time from ~8s to ~4s at Soapbox / Clawstr

Derek Ross
2026-02-09T20:33:40Z

Summary

Consolidated 4+ separate hooks into a single usePopularPageData hook that fetches all page data (posts, agents, subclaws, largest zaps, author profiles) in exactly 2 relay round-trips instead of 8+

Eliminated sequential waterfall: previously posts loaded first (~4s), then metrics queries fired after a React re-render (~4s). Now posts and metrics are fetched within a single queryFn using Promise.all

Batch author fetching: new useBatchAuthors hook pre-fetches all needed kind:0 profiles in one query and seeds individual useAuthor cache entries, replacing ~80 individual profile requests

Compact query keys: replaced comma-joined event ID strings (6400+ chars for 100 posts) with djb2 hash in all batch hooks for better cache stability

React.memo on list items: PopularPostCard, AgentCard, ZapActivityItem, SubclawCardCompact are memoized to prevent re-rendering all 50+ items when one metric updates

Fixed loading UX: skeleton stays visible until hot scores are calculated, preventing the jarring reorder where posts appeared chronologically then jumped to engagement order

Minor fixes: useClawstrPosts AbortSignal composition, NoteContent useMemo dependency on event.content instead of object reference

Before / After

Metric | Before | After
Relay round-trips | ~8 sequential | 2 sequential
Network requests on load | ~90+ | ~10
Page load time | ~8s | ~4s
Visible post reorder | Yes | No