From 2b10398cca3fa74a7c2187c8d9c23ba789333f5b Mon Sep 17 00:00:00 2001
From: maria <maria@kuuro.net>
Date: Thu, 3 Sep 2026 23:08:26 -0400
Subject: [PATCH] fix(web): render settings sidebar immediately (#9563)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>
---
 apps/web/src/components/AppSidebarLayout.tsx  | 15 ++-----------
 .../settings/SettingsSidebarNav.tsx           | 22 ++++++++++++++++---
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/AppSidebarLayout.tsx b/apps/web/src/components/AppSidebarLayout.tsx
index 1780c8b9acb8cc2852c692beafe498359bc19a7c..3bef170bcf519658aa6ac5798baad2f6df256af4 100644
--- a/apps/web/src/components/AppSidebarLayout.tsx
+++ b/apps/web/src/components/AppSidebarLayout.tsx
@@ -1,8 +1,6 @@
 import { useAtomValue } from "@effect/atom-react";
 import * as Schema from "effect/Schema";
 import {
-  lazy,
-  Suspense,
   useEffect,
   useState,
   useSyncExternalStore,
@@ -20,6 +18,7 @@ import { useEnvironmentIdentificationMode, useLegacySidebarEnabled } from "../ho
 import { usePanelAnimationSettings } from "../panelAnimations";
 import LegacyThreadSidebar from "./LegacySidebar";
 import ThreadSidebar from "./Sidebar";
+import { SettingsSidebarNav } from "./settings/SettingsSidebarNav";
 import { SidebarChromeHeader } from "./sidebar/SidebarChrome";
 import {
   resolveSidebarStageFocusRingOffsetClass,
@@ -45,14 +44,6 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
 
 const MACOS_TRAFFIC_LIGHTS_LEFT_INSET = "90px";
 
-// The settings nav (and the Clerk profile surfaces behind it) only renders on
-// settings routes; lazy-loading it keeps that subtree out of the startup chunk.
-const SettingsSidebarNav = lazy(() =>
-  import("./settings/SettingsSidebarNav").then((module) => ({
-    default: module.SettingsSidebarNav,
-  })),
-);
-
 function subscribeToViewportWidth(onChange: () => void): () => void {
   window.addEventListener("resize", onChange);
   return () => window.removeEventListener("resize", onChange);
@@ -247,9 +238,7 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
         {isOnSettings ? (
           <>
             <SidebarChromeHeader isElectron={isElectron} />
-            <Suspense fallback={null}>
-              <SettingsSidebarNav pathname={pathname} />
-            </Suspense>
+            <SettingsSidebarNav pathname={pathname} />
           </>
         ) : legacySidebarEnabled ? (
           <LegacyThreadSidebar />
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index f703ba09f8c27546a43bce6c2ab1eb803f322752..2716569c571cf88197fecb18291318700a3f0410 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -1,4 +1,6 @@
 import {
+  lazy,
+  Suspense,
   useCallback,
   useEffect,
   useMemo,
@@ -36,7 +38,6 @@ import {
   SidebarMenuSubItem,
   useSidebar,
 } from "../ui/sidebar";
-import { T3ConnectSidebarAvatar, T3ConnectSidebarSignIn } from "../clerk/T3ConnectSidebarSignIn";
 import { SidebarUtilityMenu } from "../sidebar/SidebarChrome";
 import { scrollToSettingsTarget } from "./settingsLayout";
 import {
@@ -47,6 +48,17 @@ import {
 } from "./settingsSearch";
 import { useAvailableSettingsSearchItems } from "./useAvailableSettingsSearchItems";
 
+const T3ConnectSidebarSignIn = lazy(() =>
+  import("../clerk/T3ConnectSidebarSignIn").then((module) => ({
+    default: module.T3ConnectSidebarSignIn,
+  })),
+);
+const T3ConnectSidebarAvatar = lazy(() =>
+  import("../clerk/T3ConnectSidebarSignIn").then((module) => ({
+    default: module.T3ConnectSidebarAvatar,
+  })),
+);
+
 const SETTINGS_SECTION_ICONS: Readonly<
   Record<SettingsPath, ComponentType<{ className?: string }>>
 > = {
@@ -370,12 +382,16 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter className="p-[var(--sidebar-content-inset)]">
-        <T3ConnectSidebarSignIn />
+        <Suspense fallback={null}>
+          <T3ConnectSidebarSignIn />
+        </Suspense>
         <div className="flex items-center gap-1">
           <div className="min-w-0 flex-1">
             <SidebarUtilityMenu />
           </div>
-          <T3ConnectSidebarAvatar />
+          <Suspense fallback={null}>
+            <T3ConnectSidebarAvatar />
+          </Suspense>
         </div>
       </SidebarFooter>
     </>
-- 
2.54.0