From 528e2a48fc4febdda0d43ba8c25b15771f8b0be0 Mon Sep 17 00:00:00 2001
From: Lotus Bot <lotus@lotusguild.org>
Date: Thu, 21 May 2026 16:14:08 -0400
Subject: [PATCH] perf(router): lazy-load Lobby/Explore/Inbox routes; fix
 spoiler aria-pressed initial state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lobby, Explore/FeaturedRooms/PublicRooms, Inbox/Notifications/Invites are
now lazy-loaded via React.lazy so they only enter the bundle when navigated
to. Main bundle: 2547 kB → 2472 kB (gzip 637 → 618 kB).

Spoiler aria-pressed was initialised to false (revealed); changed to true
so the spoiler starts hidden, matching CSS logic (aria-pressed=true →
color:transparent).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/pages/Router.tsx                     | 27 ++++++++++++--------
 src/app/plugins/react-custom-html-parser.tsx |  2 +-
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 1a574b49b..562ecd0c8 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -46,11 +46,11 @@ import { ClientBindAtoms, ClientLayout, ClientRoot } from './client';
 import { Home, HomeRouteRoomProvider, HomeSearch } from './client/home';
 import { Direct, DirectCreate, DirectRouteRoomProvider } from './client/direct';
 import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from './client/space';
-import { Explore, FeaturedRooms, PublicRooms } from './client/explore';
-import { Notifications, Inbox, Invites } from './client/inbox';
+
+
 import { setAfterLoginRedirectPath } from './afterLoginRedirectPath';
 import { Room } from '../features/room';
-import { Lobby } from '../features/lobby';
+
 import { WelcomePage } from './client/WelcomePage';
 import { SidebarNav } from './client/SidebarNav';
 import { PageRoot } from '../components/page';
@@ -70,6 +70,13 @@ import { HomeCreateRoom } from './client/home/CreateRoom';
 import { Create } from './client/create';
 const CreateSpaceModalRenderer = React.lazy(() => import('../features/create-space').then(m => ({ default: m.CreateSpaceModalRenderer })));
 const SearchModalRenderer = React.lazy(() => import('../features/search').then(m => ({ default: m.SearchModalRenderer })));
+const Explore = React.lazy(() => import('./client/explore').then(m => ({ default: m.Explore })));
+const FeaturedRooms = React.lazy(() => import('./client/explore').then(m => ({ default: m.FeaturedRooms })));
+const PublicRooms = React.lazy(() => import('./client/explore').then(m => ({ default: m.PublicRooms })));
+const Notifications = React.lazy(() => import('./client/inbox').then(m => ({ default: m.Notifications })));
+const Inbox = React.lazy(() => import('./client/inbox').then(m => ({ default: m.Inbox })));
+const Invites = React.lazy(() => import('./client/inbox').then(m => ({ default: m.Invites })));
+const Lobby = React.lazy(() => import('../features/lobby').then(m => ({ default: m.Lobby })));
 import { getFallbackSession } from '../state/sessions';
 import { CallStatusRenderer } from './CallStatusRenderer';
 import { CallEmbedProvider } from '../components/CallEmbedProvider';
@@ -238,7 +245,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
               element={<WelcomePage />}
             />
           )}
-          <Route path={_LOBBY_PATH} element={<Lobby />} />
+          <Route path={_LOBBY_PATH} element={<React.Suspense fallback={null}><Lobby /></React.Suspense>} />
           <Route path={_SEARCH_PATH} element={<SpaceSearch />} />
           <Route
             path={_ROOM_PATH}
@@ -255,7 +262,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
             <PageRoot
               nav={
                 <MobileFriendlyPageNav path={EXPLORE_PATH}>
-                  <Explore />
+                  <React.Suspense fallback={null}><Explore /></React.Suspense>
                 </MobileFriendlyPageNav>
               }
             >
@@ -270,8 +277,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
               element={<WelcomePage />}
             />
           )}
-          <Route path={_FEATURED_PATH} element={<FeaturedRooms />} />
-          <Route path={_SERVER_PATH} element={<PublicRooms />} />
+          <Route path={_FEATURED_PATH} element={<React.Suspense fallback={null}><FeaturedRooms /></React.Suspense>} />
+          <Route path={_SERVER_PATH} element={<React.Suspense fallback={null}><PublicRooms /></React.Suspense>} />
         </Route>
         <Route path={CREATE_PATH} element={<Create />} />
         <Route
@@ -280,7 +287,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
             <PageRoot
               nav={
                 <MobileFriendlyPageNav path={INBOX_PATH}>
-                  <Inbox />
+                  <React.Suspense fallback={null}><Inbox /></React.Suspense>
                 </MobileFriendlyPageNav>
               }
             >
@@ -295,8 +302,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
               element={<WelcomePage />}
             />
           )}
-          <Route path={_NOTIFICATIONS_PATH} element={<Notifications />} />
-          <Route path={_INVITES_PATH} element={<Invites />} />
+          <Route path={_NOTIFICATIONS_PATH} element={<React.Suspense fallback={null}><Notifications /></React.Suspense>} />
+          <Route path={_INVITES_PATH} element={<React.Suspense fallback={null}><Invites /></React.Suspense>} />
         </Route>
       </Route>
       <Route path="/*" element={<p>Page not found</p>} />
diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx
index c5b01313c..98d719420 100644
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/src/app/plugins/react-custom-html-parser.tsx
@@ -466,7 +466,7 @@ export const getReactCustomHtmlParser = (
               onClick={params.handleSpoilerClick}
               className={css.Spoiler()}
               aria-label="Spoiler — click to reveal"
-              aria-pressed={false}
+              aria-pressed={true}
               style={{ cursor: 'pointer' }}
             >
               {domToReact(children, opts)}