authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-09-03 23:08:26-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-03 23:08:26-04:00
log2b10398cca3fa74a7c2187c8d9c23ba789333f5b
tree2863ba1ec33c2236c31824220a0569e99a3b6de2
parentd7884ce90b9845e6e8aa737dfe02062b91b11c91
signature Signed by PGP key B5690EEEBB952194

fix(web): render settings sidebar immediately (#9563)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>

2 files changed, 21 insertions(+), 16 deletions(-)

apps/web/src/components/AppSidebarLayout.tsx+2-13
......@@ -1,8 +1,6 @@
11import { useAtomValue } from "@effect/atom-react";
22import * as Schema from "effect/Schema";
33import {
4 lazy,
5 Suspense,
64 useEffect,
75 useState,
86 useSyncExternalStore,
......@@ -20,6 +18,7 @@ import { useEnvironmentIdentificationMode, useLegacySidebarEnabled } from "../ho
2018import { usePanelAnimationSettings } from "../panelAnimations";
2119import LegacyThreadSidebar from "./LegacySidebar";
2220import ThreadSidebar from "./Sidebar";
21import { SettingsSidebarNav } from "./settings/SettingsSidebarNav";
2322import { SidebarChromeHeader } from "./sidebar/SidebarChrome";
2423import {
2524 resolveSidebarStageFocusRingOffsetClass,
......@@ -45,14 +44,6 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
4544
4645const MACOS_TRAFFIC_LIGHTS_LEFT_INSET = "90px";
4746
48// The settings nav (and the Clerk profile surfaces behind it) only renders on
49// settings routes; lazy-loading it keeps that subtree out of the startup chunk.
50const SettingsSidebarNav = lazy(() =>
51 import("./settings/SettingsSidebarNav").then((module) => ({
52 default: module.SettingsSidebarNav,
53 })),
54);
55
5647function subscribeToViewportWidth(onChange: () => void): () => void {
5748 window.addEventListener("resize", onChange);
5849 return () => window.removeEventListener("resize", onChange);
......@@ -247,9 +238,7 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
247238 {isOnSettings ? (
248239 <>
249240 <SidebarChromeHeader isElectron={isElectron} />
250 <Suspense fallback={null}>
251 <SettingsSidebarNav pathname={pathname} />
252 </Suspense>
241 <SettingsSidebarNav pathname={pathname} />
253242 </>
254243 ) : legacySidebarEnabled ? (
255244 <LegacyThreadSidebar />
apps/web/src/components/settings/SettingsSidebarNav.tsx+19-3
......@@ -1,4 +1,6 @@
11import {
2 lazy,
3 Suspense,
24 useCallback,
35 useEffect,
46 useMemo,
......@@ -36,7 +38,6 @@ import {
3638 SidebarMenuSubItem,
3739 useSidebar,
3840} from "../ui/sidebar";
39import { T3ConnectSidebarAvatar, T3ConnectSidebarSignIn } from "../clerk/T3ConnectSidebarSignIn";
4041import { SidebarUtilityMenu } from "../sidebar/SidebarChrome";
4142import { scrollToSettingsTarget } from "./settingsLayout";
4243import {
......@@ -47,6 +48,17 @@ import {
4748} from "./settingsSearch";
4849import { useAvailableSettingsSearchItems } from "./useAvailableSettingsSearchItems";
4950
51const T3ConnectSidebarSignIn = lazy(() =>
52 import("../clerk/T3ConnectSidebarSignIn").then((module) => ({
53 default: module.T3ConnectSidebarSignIn,
54 })),
55);
56const T3ConnectSidebarAvatar = lazy(() =>
57 import("../clerk/T3ConnectSidebarSignIn").then((module) => ({
58 default: module.T3ConnectSidebarAvatar,
59 })),
60);
61
5062const SETTINGS_SECTION_ICONS: Readonly<
5163 Record<SettingsPath, ComponentType<{ className?: string }>>
5264> = {
......@@ -370,12 +382,16 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
370382 </SidebarGroup>
371383 </SidebarContent>
372384 <SidebarFooter className="p-[var(--sidebar-content-inset)]">
373 <T3ConnectSidebarSignIn />
385 <Suspense fallback={null}>
386 <T3ConnectSidebarSignIn />
387 </Suspense>
374388 <div className="flex items-center gap-1">
375389 <div className="min-w-0 flex-1">
376390 <SidebarUtilityMenu />
377391 </div>
378 <T3ConnectSidebarAvatar />
392 <Suspense fallback={null}>
393 <T3ConnectSidebarAvatar />
394 </Suspense>
379395 </div>
380396 </SidebarFooter>
381397 </>