From dca162c5f9dd9e093bee50b48e20c8f0a7914785 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Wed, 7 Oct 2026 12:16:12 +1100
Subject: [PATCH] perf(home): hydrate the sections under the hero on view

The homepage preloaded and hydrated every section before the first frame. Demos, the trending board and the agents band now render on the server and hydrate once they scroll into view.
---
 app/pages/index.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index bd9434c2..ea25e215 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -275,8 +275,13 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
 
     <HomeLifecycle />
 
+    <!--
+      The sections under the hero render on the server and hydrate once they
+      scroll into view, so their code stays out of the scripts the first paint
+      waits on.
+    -->
     <!-- The first content section: what Skills make, before any list of them. -->
-    <HomeDemos :demos="demosData?.items ?? []" />
+    <LazyHomeDemos hydrate-on-visible :demos="demosData?.items ?? []" />
 
     <section
       v-if="showTrending || trendingStatus === 'pending'"
@@ -301,7 +306,7 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
 
         <template v-else>
           <div class="mt-8">
-            <BoardRankedList :rows="trendingBoard" surface="home-trending-row" @avatar-error="onAvatarError" />
+            <LazyBoardRankedList hydrate-on-visible :rows="trendingBoard" surface="home-trending-row" @avatar-error="onAvatarError" />
           </div>
           <UButton
             :to="weekBoardPath"
@@ -316,7 +321,7 @@ function recentRepoDescription(item: RecentRepoUpdate): string {
       </div>
     </section>
 
-    <HomeAgents />
+    <LazyHomeAgents hydrate-on-visible />
 
     <section
       id="outcomes"