🤖 fix: add loading state to ProjectContext to fix Storybook race (#960)

The SingleProject story sometimes failed to show workspace creation
controls because of a race between two async operations:

1. **ProjectContext** loads projects via `api.projects.list()`
2. **WorkspaceContext** loads workspaces via `api.workspace.list()`

When `WorkspaceContext.loading` became `false`, App would render but
projects might still be empty (size 0), causing the condition
`projects.size === 1` to be false, so `creationProjectPath` was null.

**Fix:** Add a `loading` state to ProjectContext and gate on it in
AppLoaderInner alongside `workspaceContext.loading`.

_Generated with `mux`_

Author: ammar-agent

src/browser/components/AppLoader.tsx

@@ -3,7 +3,7 @@ import App from "../App";
 import { LoadingScreen } from "./LoadingScreen";
 import { useWorkspaceStoreRaw } from "../stores/WorkspaceStore";
 import { useGitStatusStoreRaw } from "../stores/GitStatusStore";
-import { ProjectProvider } from "../contexts/ProjectContext";
+import { ProjectProvider, useProjectContext } from "../contexts/ProjectContext";
 import { APIProvider, useAPI, type APIClient } from "@/browser/contexts/API";
 import { WorkspaceProvider, useWorkspaceContext } from "../contexts/WorkspaceContext";
 
@@ -41,6 +41,7 @@ export function AppLoader(props: AppLoaderProps) {
  */
 function AppLoaderInner() {
   const workspaceContext = useWorkspaceContext();
+  const projectContext = useProjectContext();
   const { api } = useAPI();
 
   // Get store instances
@@ -72,8 +73,8 @@ function AppLoaderInner() {
     api,
   ]);
 
-  // Show loading screen until stores are synced
-  if (workspaceContext.loading || !storesSynced) {
+  // Show loading screen until both projects and workspaces are loaded and stores synced
+  if (projectContext.loading || workspaceContext.loading || !storesSynced) {
     return <LoadingScreen />;
   }
 

src/browser/contexts/ProjectContext.tsx

@@ -25,6 +25,8 @@ interface WorkspaceModalState {
 
 export interface ProjectContext {
   projects: Map<string, ProjectConfig>;
+  /** True while initial project list is loading */
+  loading: boolean;
   refreshProjects: () => Promise<void>;
   addProject: (normalizedPath: string, projectConfig: ProjectConfig) => void;
   removeProject: (path: string) => Promise<{ success: boolean; error?: string }>;
@@ -58,6 +60,7 @@ function deriveProjectName(projectPath: string): string {
 export function ProjectProvider(props: { children: ReactNode }) {
   const { api } = useAPI();
   const [projects, setProjects] = useState<Map<string, ProjectConfig>>(new Map());
+  const [loading, setLoading] = useState(true);
   const [isProjectCreateModalOpen, setProjectCreateModalOpen] = useState(false);
   const [workspaceModalState, setWorkspaceModalState] = useState<WorkspaceModalState>({
     isOpen: false,
@@ -82,7 +85,10 @@ export function ProjectProvider(props: { children: ReactNode }) {
   }, [api]);
 
   useEffect(() => {
-    void refreshProjects();
+    void (async () => {
+      await refreshProjects();
+      setLoading(false);
+    })();
   }, [refreshProjects]);
 
   const addProject = useCallback((normalizedPath: string, projectConfig: ProjectConfig) => {
@@ -224,6 +230,7 @@ export function ProjectProvider(props: { children: ReactNode }) {
   const value = useMemo<ProjectContext>(
     () => ({
       projects,
+      loading,
       refreshProjects,
       addProject,
       removeProject,
@@ -239,6 +246,7 @@ export function ProjectProvider(props: { children: ReactNode }) {
     }),
     [
       projects,
+      loading,
       refreshProjects,
       addProject,
       removeProject,