Skip to content

Commit aa78d35

Browse files
ammar-agentammar-agent
committed
🤖 Simplify initialization with AppLoader wrapper component
Refactored app initialization to use a dedicated AppLoader wrapper that handles all loading, syncing, and restoration before rendering the main App. **Problem:** - App.tsx had scattered `storesSynced` gating logic (9 references) - 3 effects with `if (!storesSynced) return` guards - Complex dependency arrays and execution ordering concerns - Early return with LoadingScreen created confusing flow **Solution:** - Created `AppLoader` component that handles: 1. Load workspace metadata and projects 2. Sync stores with loaded data 3. Restore workspace from URL hash (if present) 4. Only render App when everything is ready - App.tsx now: - Accepts all state as props (no longer calls management hooks) - Assumes stores are always synced (no guards needed) - Simpler effects without conditional execution - Clearer separation of concerns **Benefits:** - Explicit loading boundary at component tree level - All initialization logic in one place - App.tsx is 48 lines shorter - No more race conditions between effects - Similar to Suspense pattern but simpler **Changes:** - New: `src/components/AppLoader.tsx` (115 lines) - Modified: `src/App.tsx` (-75 lines, removed init logic) - Modified: `src/main.tsx` (render AppLoader instead of App) - Net: +40 lines **Testing:** - All 765 tests passing - Build successful - Type checking clean _Generated with `cmux`_
1 parent 4eeba9e commit aa78d35

File tree

3 files changed

+167
-100
lines changed

3 files changed

+167
-100
lines changed

‎src/App.tsx‎

Lines changed: 50 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
1-
import { useState, useEffect, useCallback, useRef } from "react";
1+
import { useState, useEffect, useCallback, useRef, type Dispatch, type SetStateAction } from "react";
22
import "./styles/globals.css";
33
import type { ProjectConfig } from "./config";
44
import type { WorkspaceSelection } from "./components/ProjectSidebar";
55
import type { FrontendWorkspaceMetadata } from "./types/workspace";
66
import { LeftSidebar } from "./components/LeftSidebar";
7-
import { LoadingScreen } from "./components/LoadingScreen";
87
import NewWorkspaceModal from "./components/NewWorkspaceModal";
98
import { DirectorySelectModal } from "./components/DirectorySelectModal";
109
import { AIView } from "./components/AIView";
1110
import { ErrorBoundary } from "./components/ErrorBoundary";
1211
import { usePersistedState, updatePersistedState } from "./hooks/usePersistedState";
1312
import { matchesKeybind, KEYBINDS } from "./utils/ui/keybinds";
14-
import { useProjectManagement } from "./hooks/useProjectManagement";
15-
import { useWorkspaceManagement } from "./hooks/useWorkspaceManagement";
1613
import { useResumeManager } from "./hooks/useResumeManager";
1714
import { useUnreadTracking } from "./hooks/useUnreadTracking";
1815
import { useAutoCompactContinue } from "./hooks/useAutoCompactContinue";
1916
import { useWorkspaceStoreRaw, useWorkspaceRecency } from "./stores/WorkspaceStore";
20-
import { useGitStatusStoreRaw } from "./stores/GitStatusStore";
2117

2218
import { useStableReference, compareMaps } from "./hooks/useStableReference";
2319
import { CommandRegistryProvider, useCommandRegistry } from "./contexts/CommandRegistryContext";
@@ -34,13 +30,48 @@ import { useTelemetry } from "./hooks/useTelemetry";
3430

3531
const THINKING_LEVELS: ThinkingLevel[] = ["off", "low", "medium", "high"];
3632

37-
function AppInner() {
38-
// Workspace selection - restored from localStorage immediately,
39-
// but entire UI is gated behind metadata loading (see early return below)
40-
const [selectedWorkspace, setSelectedWorkspace] = usePersistedState<WorkspaceSelection | null>(
41-
"selectedWorkspace",
42-
null
43-
);
33+
interface AppInnerProps {
34+
projects: Map<string, ProjectConfig>;
35+
setProjects: Dispatch<SetStateAction<Map<string, ProjectConfig>>>;
36+
addProject: () => Promise<void>;
37+
removeProject: (path: string) => Promise<void>;
38+
workspaceMetadata: Map<string, FrontendWorkspaceMetadata>;
39+
setWorkspaceMetadata: Dispatch<SetStateAction<Map<string, FrontendWorkspaceMetadata>>>;
40+
createWorkspace: (
41+
projectPath: string,
42+
branchName: string,
43+
trunkBranch: string
44+
) => Promise<{
45+
projectPath: string;
46+
projectName: string;
47+
namedWorkspacePath: string;
48+
workspaceId: string;
49+
}>;
50+
removeWorkspace: (
51+
workspaceId: string,
52+
options?: { force?: boolean }
53+
) => Promise<{ success: boolean; error?: string }>;
54+
renameWorkspace: (
55+
workspaceId: string,
56+
newName: string
57+
) => Promise<{ success: boolean; error?: string }>;
58+
selectedWorkspace: WorkspaceSelection | null;
59+
setSelectedWorkspace: (workspace: WorkspaceSelection | null) => void;
60+
}
61+
62+
function AppInner({
63+
projects,
64+
setProjects,
65+
addProject,
66+
removeProject,
67+
workspaceMetadata,
68+
setWorkspaceMetadata,
69+
createWorkspace,
70+
removeWorkspace,
71+
renameWorkspace,
72+
selectedWorkspace,
73+
setSelectedWorkspace,
74+
}: AppInnerProps) {
4475

4576
const [workspaceModalOpen, setWorkspaceModalOpen] = useState(false);
4677
const [workspaceModalProject, setWorkspaceModalProject] = useState<string | null>(null);
@@ -63,21 +94,18 @@ function AppInner() {
6394
// Telemetry tracking
6495
const telemetry = useTelemetry();
6596

97+
// Get workspace store for command palette
98+
const workspaceStore = useWorkspaceStoreRaw();
99+
66100
// Wrapper for setSelectedWorkspace that tracks telemetry
67101
const handleWorkspaceSwitch = useCallback(
68102
(newWorkspace: WorkspaceSelection | null) => {
69-
console.debug("[App] handleWorkspaceSwitch called", {
70-
from: selectedWorkspace?.workspaceId,
71-
to: newWorkspace?.workspaceId,
72-
});
73-
74103
// Track workspace switch when both old and new are non-null (actual switch, not init/clear)
75104
if (
76105
selectedWorkspace &&
77106
newWorkspace &&
78107
selectedWorkspace.workspaceId !== newWorkspace.workspaceId
79108
) {
80-
console.debug("[App] Calling telemetry.workspaceSwitched");
81109
telemetry.workspaceSwitched(selectedWorkspace.workspaceId, newWorkspace.workspaceId);
82110
}
83111

@@ -86,54 +114,13 @@ function AppInner() {
86114
[selectedWorkspace, setSelectedWorkspace, telemetry]
87115
);
88116

89-
// Use custom hooks for project and workspace management
90-
const { projects, setProjects, addProject, removeProject } = useProjectManagement();
91-
92-
// Workspace management needs to update projects state when workspace operations complete
93-
const handleProjectsUpdate = useCallback(
94-
(newProjects: Map<string, ProjectConfig>) => {
95-
setProjects(newProjects);
96-
},
97-
[setProjects]
98-
);
99-
100-
const {
101-
workspaceMetadata,
102-
setWorkspaceMetadata,
103-
loading: metadataLoading,
104-
createWorkspace,
105-
removeWorkspace,
106-
renameWorkspace,
107-
} = useWorkspaceManagement({
108-
selectedWorkspace,
109-
onProjectsUpdate: handleProjectsUpdate,
110-
onSelectedWorkspaceUpdate: setSelectedWorkspace,
111-
});
112-
113-
// Sync workspace metadata with the stores BEFORE rendering workspace UI
114-
const workspaceStore = useWorkspaceStoreRaw();
115-
const gitStatusStore = useGitStatusStoreRaw();
116-
117-
// Track whether stores have been synced (separate from metadata loading)
118-
const [storesSynced, setStoresSynced] = useState(false);
119-
120-
useEffect(() => {
121-
if (!metadataLoading) {
122-
workspaceStore.syncWorkspaces(workspaceMetadata);
123-
gitStatusStore.syncWorkspaces(workspaceMetadata);
124-
setStoresSynced(true);
125-
} else {
126-
setStoresSynced(false);
127-
}
128-
}, [metadataLoading, workspaceMetadata, workspaceStore, gitStatusStore]);
129-
130117
// Validate selectedWorkspace when metadata changes
131118
// Clear selection if workspace was deleted
132119
useEffect(() => {
133-
if (storesSynced && selectedWorkspace && !workspaceMetadata.has(selectedWorkspace.workspaceId)) {
120+
if (selectedWorkspace && !workspaceMetadata.has(selectedWorkspace.workspaceId)) {
134121
setSelectedWorkspace(null);
135122
}
136-
}, [storesSynced, selectedWorkspace, workspaceMetadata, setSelectedWorkspace]);
123+
}, [selectedWorkspace, workspaceMetadata, setSelectedWorkspace]);
137124

138125
// Track last-read timestamps for unread indicators
139126
const { lastReadTimestamps, onToggleUnread } = useUnreadTracking(selectedWorkspace);
@@ -167,35 +154,6 @@ function AppInner() {
167154
}
168155
}, [selectedWorkspace, workspaceMetadata]);
169156

170-
// Restore workspace from URL on mount (if valid)
171-
// This effect runs once on mount to restore from hash, which takes priority over localStorage
172-
const [hasRestoredFromHash, setHasRestoredFromHash] = useState(false);
173-
174-
useEffect(() => {
175-
// Only run once
176-
if (hasRestoredFromHash) return;
177-
178-
const hash = window.location.hash;
179-
if (hash.startsWith("#workspace=")) {
180-
const workspaceId = decodeURIComponent(hash.substring("#workspace=".length));
181-
182-
// Find workspace in metadata
183-
const metadata = workspaceMetadata.get(workspaceId);
184-
185-
if (metadata) {
186-
// Restore from hash (overrides localStorage)
187-
setSelectedWorkspace({
188-
workspaceId: metadata.id,
189-
projectPath: metadata.projectPath,
190-
projectName: metadata.projectName,
191-
namedWorkspacePath: metadata.namedWorkspacePath,
192-
});
193-
}
194-
}
195-
196-
setHasRestoredFromHash(true);
197-
}, [workspaceMetadata, hasRestoredFromHash, setSelectedWorkspace]);
198-
199157
// Validate selected workspace exists and has all required fields
200158
useEffect(() => {
201159
if (selectedWorkspace) {
@@ -674,12 +632,6 @@ function AppInner() {
674632
);
675633
}, [projects, setSelectedWorkspace, setWorkspaceMetadata]);
676634

677-
// CRITICAL: Don't render workspace UI until metadata loads AND stores are synced
678-
// This ensures WorkspaceStore.addWorkspace() is called before any component accesses workspaces
679-
if (metadataLoading || !storesSynced) {
680-
return <LoadingScreen />;
681-
}
682-
683635
return (
684636
<>
685637
<div className="bg-bg-dark flex h-screen overflow-hidden [@media(max-width:768px)]:flex-col">
@@ -766,10 +718,10 @@ function AppInner() {
766718
);
767719
}
768720

769-
function App() {
721+
function App(props: AppInnerProps) {
770722
return (
771723
<CommandRegistryProvider>
772-
<AppInner />
724+
<AppInner {...props} />
773725
</CommandRegistryProvider>
774726
);
775727
}

‎src/components/AppLoader.tsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { useState, useEffect } from "react";
2+
import App from "../App";
3+
import { LoadingScreen } from "./LoadingScreen";
4+
import { useProjectManagement } from "../hooks/useProjectManagement";
5+
import { useWorkspaceManagement } from "../hooks/useWorkspaceManagement";
6+
import { useWorkspaceStoreRaw } from "../stores/WorkspaceStore";
7+
import { useGitStatusStoreRaw } from "../stores/GitStatusStore";
8+
import { usePersistedState } from "../hooks/usePersistedState";
9+
import type { WorkspaceSelection } from "./ProjectSidebar";
10+
11+
/**
12+
* AppLoader handles all initialization before rendering the main App:
13+
* 1. Load workspace metadata and projects
14+
* 2. Sync stores with loaded data
15+
* 3. Restore workspace selection from URL hash (if present)
16+
* 4. Only render App when everything is ready
17+
*
18+
* This ensures App.tsx can assume stores are always synced and removes
19+
* the need for conditional guards in effects.
20+
*/
21+
export function AppLoader() {
22+
// Workspace selection - restored from localStorage immediately
23+
const [selectedWorkspace, setSelectedWorkspace] = usePersistedState<WorkspaceSelection | null>(
24+
"selectedWorkspace",
25+
null
26+
);
27+
28+
// Load projects
29+
const projectManagement = useProjectManagement();
30+
31+
// Load workspace metadata
32+
// Pass empty callbacks for now - App will provide the actual handlers
33+
const workspaceManagement = useWorkspaceManagement({
34+
selectedWorkspace,
35+
onProjectsUpdate: projectManagement.setProjects,
36+
onSelectedWorkspaceUpdate: setSelectedWorkspace,
37+
});
38+
39+
// Get store instances
40+
const workspaceStore = useWorkspaceStoreRaw();
41+
const gitStatusStore = useGitStatusStoreRaw();
42+
43+
// Track whether stores have been synced
44+
const [storesSynced, setStoresSynced] = useState(false);
45+
46+
// Sync stores when metadata finishes loading
47+
useEffect(() => {
48+
if (!workspaceManagement.loading) {
49+
workspaceStore.syncWorkspaces(workspaceManagement.workspaceMetadata);
50+
gitStatusStore.syncWorkspaces(workspaceManagement.workspaceMetadata);
51+
setStoresSynced(true);
52+
} else {
53+
setStoresSynced(false);
54+
}
55+
}, [
56+
workspaceManagement.loading,
57+
workspaceManagement.workspaceMetadata,
58+
workspaceStore,
59+
gitStatusStore,
60+
]);
61+
62+
// Restore workspace from URL hash (runs once when stores are synced)
63+
const [hasRestoredFromHash, setHasRestoredFromHash] = useState(false);
64+
65+
useEffect(() => {
66+
// Wait until stores are synced before attempting restoration
67+
if (!storesSynced) return;
68+
69+
// Only run once
70+
if (hasRestoredFromHash) return;
71+
72+
const hash = window.location.hash;
73+
if (hash.startsWith("#workspace=")) {
74+
const workspaceId = decodeURIComponent(hash.substring("#workspace=".length));
75+
76+
// Find workspace in metadata
77+
const metadata = workspaceManagement.workspaceMetadata.get(workspaceId);
78+
79+
if (metadata) {
80+
// Restore from hash (overrides localStorage)
81+
setSelectedWorkspace({
82+
workspaceId: metadata.id,
83+
projectPath: metadata.projectPath,
84+
projectName: metadata.projectName,
85+
namedWorkspacePath: metadata.namedWorkspacePath,
86+
});
87+
}
88+
}
89+
90+
setHasRestoredFromHash(true);
91+
}, [storesSynced, workspaceManagement.workspaceMetadata, hasRestoredFromHash, setSelectedWorkspace]);
92+
93+
// Show loading screen until stores are synced
94+
if (workspaceManagement.loading || !storesSynced) {
95+
return <LoadingScreen />;
96+
}
97+
98+
// Render App with all initialized data
99+
return (
100+
<App
101+
projects={projectManagement.projects}
102+
setProjects={projectManagement.setProjects}
103+
addProject={projectManagement.addProject}
104+
removeProject={projectManagement.removeProject}
105+
workspaceMetadata={workspaceManagement.workspaceMetadata}
106+
setWorkspaceMetadata={workspaceManagement.setWorkspaceMetadata}
107+
createWorkspace={workspaceManagement.createWorkspace}
108+
removeWorkspace={workspaceManagement.removeWorkspace}
109+
renameWorkspace={workspaceManagement.renameWorkspace}
110+
selectedWorkspace={selectedWorkspace}
111+
setSelectedWorkspace={setSelectedWorkspace}
112+
/>
113+
);
114+
}
115+

‎src/main.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
3-
import App from "./App";
3+
import { AppLoader } from "./components/AppLoader";
44
import { initTelemetry, trackAppStarted } from "./telemetry";
55

66
// Shims the `window.api` object with the browser API.
@@ -35,7 +35,7 @@ window.addEventListener("unhandledrejection", (event) => {
3535

3636
ReactDOM.createRoot(document.getElementById("root")!).render(
3737
<React.StrictMode>
38-
<App />
38+
<AppLoader />
3939
</React.StrictMode>
4040
);
4141

0 commit comments

Comments
 (0)