feat(client): fetch the media apps, the player, settings and search on first use

apps.js registers Videos, Music, Photos and every settings pane through
lazy.js; the group page does the same for the video player and the
settings panel, and the shell for the search page. The first download
goes from 49 modules / 386 KB gzip to 37 / 289 KB; opening Music now
fetches music-app.js and media-tiles.js and nothing of Videos.
test_first_load_is_lean holds the eager graph; test_spa_imports checks
that every on-demand load names an export that exists.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 8 insertions, 1 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index 856a774..6b20a63 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -20,7 +20,7 @@ import {
 } from './hub-client.js';
 import { startIdleWatch, markActive } from './idle.js';
 import { GroupPage } from './group-page.js';
-import { SearchPage } from './search-page.js';
+import { lazy } from './lazy.js';
 import { ConnectionPool } from './connection-pool.js';
 import { MusicPlayerBar } from './music-player.js';
 import { NameModal } from './playlist-menu.js';
@@ -623,6 +623,13 @@ function SetupWelcome({ onDismiss }) {
   </div>`;
 }
 
+// ── Lazy-loaded Search page ──────────────────────────────────────────────────
+//
+// It renders every app's results, so importing it here would bring every app
+// into the first download.
+const SearchPage = lazy(() => import('./search-page.js'), 'SearchPage',
+  html`<div class="page-content"><p class="page-message"><span class="spinner"></span></p></div>`);
+
 // ── Lazy-loaded Create Group page ────────────────────────────────────────────
 
 let _CreateGroupPage = null;