History

Stabilize root app shell renders

Cursor Agent committed 5 months ago

Commit 4b87dbf1 parent d1e85c41 file · +22 −18Browse files

Unified · Split

apps/web/src/routes/__root.tsx+22−18
@@ -99,19 +99,20 @@ export const Route = createRootRouteWithContext<{ · 98 unmodified lines
99 }),99 }),
100});100});
101 101
102const APP_SHELL = (
103 <CommandPalette>
104 <AppSidebarLayout>
105 <Outlet />
106 </AppSidebarLayout>
107 </CommandPalette>
108);
109
102function RootRouteView() {110function RootRouteView() {
103 const pathname = useLocation({ select: (location) => location.pathname });111 const pathname = useLocation({ select: (location) => location.pathname });
104 const { authGateState } = Route.useRouteContext();112 const { authGateState } = Route.useRouteContext();
105 const primaryEnvironmentAuthenticated = authGateState.status === "authenticated";113 const primaryEnvironmentAuthenticated = authGateState.status === "authenticated";
106 114
107 useEffect(() => {115 useBrowserChromeThemeSync(pathname);
108 const frame = window.requestAnimationFrame(() => {
109 syncBrowserChromeTheme();
110 });
111 return () => {
112 window.cancelAnimationFrame(frame);
113 };
114 }, [pathname]);
115 116
116 if (pathname === "/pair") {117 if (pathname === "/pair") {
117 return <Outlet />;118 return <Outlet />;
@@ -121,14 +122,6 @@ function RootRouteView() { · 3 unmodified lines
121 return <Outlet />;122 return <Outlet />;
122 }123 }
123 124
124 const appShell = (
125 <CommandPalette>
126 <AppSidebarLayout>
127 <Outlet />
128 </AppSidebarLayout>
129 </CommandPalette>
130 );
131
132 return (125 return (
133 <ToastProvider>126 <ToastProvider>
134 <AnchoredToastProvider>127 <AnchoredToastProvider>
@@ -142,15 +135,26 @@ function RootRouteView() { · 7 unmodified lines
142 {primaryEnvironmentAuthenticated ? <WebSocketConnectionCoordinator /> : null}135 {primaryEnvironmentAuthenticated ? <WebSocketConnectionCoordinator /> : null}
143 {primaryEnvironmentAuthenticated ? <SlowRpcAckToastCoordinator /> : null}136 {primaryEnvironmentAuthenticated ? <SlowRpcAckToastCoordinator /> : null}
144 {primaryEnvironmentAuthenticated ? (137 {primaryEnvironmentAuthenticated ? (
145 <WebSocketConnectionSurface>{appShell}</WebSocketConnectionSurface>138 <WebSocketConnectionSurface>{APP_SHELL}</WebSocketConnectionSurface>
146 ) : (139 ) : (
147 appShell140 APP_SHELL
148 )}141 )}
149 </AnchoredToastProvider>142 </AnchoredToastProvider>
150 </ToastProvider>143 </ToastProvider>
151 );144 );
152}145}
153 146
147function useBrowserChromeThemeSync(pathname: string) {
148 useEffect(() => {
149 const frame = window.requestAnimationFrame(() => {
150 syncBrowserChromeTheme();
151 });
152 return () => {
153 window.cancelAnimationFrame(frame);
154 };
155 }, [pathname]);
156}
157
154function HostedStaticEnvironmentBootstrap() {158function HostedStaticEnvironmentBootstrap() {
155 const savedEnvironmentCount = useSavedEnvironmentRegistryStore(159 const savedEnvironmentCount = useSavedEnvironmentRegistryStore(
156 (state) => Object.keys(state.byId).length,160 (state) => Object.keys(state.byId).length,