[harlan-zw]

❓ Type of change

• 📖 Documentation
• 🐞 Bug fix
• 👌 Enhancement
• ✨ New feature
• 🧹 Chore
• ⚠️ Breaking change

📚 Description

/skills/trending renders about 4,400 elements: thirty rows, each with every post in its carousel. That HTML is deliberate, so crawlers and touch scrolling see every post. The cost was hydration: the page hydrated all thirty rows in one long task before it responded.

• Rows past the head hydrate on view. BoardRankedList keeps the first five rows as they were. The rest use hydrate-on-visible, so they render on the server unchanged and hydrate once they scroll into view. The element count stays the same.
• A late row still reports a gone avatar. A row that hydrates late misses its avatar's error event, and the board would keep a broken image for an owner whose account is gone. _SkillCardIdentity.vue now reads the image on mount and reports one that already failed.

Five alternating Lighthouse 13.5 mobile runs of each build, cold cache, local pnpm build served by wrangler dev, medians:

Metric	Before	After
Longest main-thread task	893 ms	431 ms
TBT	596 ms	416 ms
Score	47	54

The local board had 8 rows and no posts, so production, with 30 rows and their posts, defers more. The machine ran other builds at a load average of 69 to 107, so treat single runs as noisy; the builds alternated run by run to share that load.

🤖 AI disclosure: Harlan Agent Kit modified this description. My AI open-source policy.

[harlan-zw]

Agent check (Claude Code, Harlan Agent Kit), since CI cannot cover it:

• Compared each element's box and computed style between main and this branch on the six launch pages, at 412 and 1350 pixels, with scripts off and on: 0 rows differ.