Skip to content

Commit 745d80d

Browse files
committed
fix(web): render settings sidebar immediately
1 parent 65f1839 commit 745d80d

2 files changed

Lines changed: 21 additions & 16 deletions

File tree

‎apps/web/src/components/AppSidebarLayout.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { useAtomValue } from "@effect/atom-react";
22
import * as Schema from "effect/Schema";
33
import {
4-
lazy,
5-
Suspense,
64
useEffect,
75
useState,
86
useSyncExternalStore,
@@ -20,6 +18,7 @@ import { useEnvironmentIdentificationMode, useLegacySidebarEnabled } from "../ho
2018
import { usePanelAnimationSettings } from "../panelAnimations";
2119
import LegacyThreadSidebar from "./LegacySidebar";
2220
import ThreadSidebar from "./Sidebar";
21+
import { SettingsSidebarNav } from "./settings/SettingsSidebarNav";
2322
import { SidebarChromeHeader } from "./sidebar/SidebarChrome";
2423
import {
2524
resolveSidebarStageFocusRingOffsetClass,
@@ -45,14 +44,6 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
4544

4645
const 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.
50-
const SettingsSidebarNav = lazy(() =>
51-
import("./settings/SettingsSidebarNav").then((module) => ({
52-
default: module.SettingsSidebarNav,
53-
})),
54-
);
55-
5647
function 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‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import {
2+
lazy,
3+
Suspense,
24
useCallback,
35
useEffect,
46
useMemo,
@@ -36,7 +38,6 @@ import {
3638
SidebarMenuSubItem,
3739
useSidebar,
3840
} from "../ui/sidebar";
39-
import { T3ConnectSidebarAvatar, T3ConnectSidebarSignIn } from "../clerk/T3ConnectSidebarSignIn";
4041
import { SidebarUtilityMenu } from "../sidebar/SidebarChrome";
4142
import { scrollToSettingsTarget } from "./settingsLayout";
4243
import {
@@ -47,6 +48,17 @@ import {
4748
} from "./settingsSearch";
4849
import { useAvailableSettingsSearchItems } from "./useAvailableSettingsSearchItems";
4950

51+
const T3ConnectSidebarSignIn = lazy(() =>
52+
import("../clerk/T3ConnectSidebarSignIn").then((module) => ({
53+
default: module.T3ConnectSidebarSignIn,
54+
})),
55+
);
56+
const T3ConnectSidebarAvatar = lazy(() =>
57+
import("../clerk/T3ConnectSidebarSignIn").then((module) => ({
58+
default: module.T3ConnectSidebarAvatar,
59+
})),
60+
);
61+
5062
const 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
</>

0 commit comments

Comments
 (0)