PY-53: Wartezeit nach "Start Development"

src/components/git/TaskDevelopmentEmptyState.tsx

@@ -65,11 +65,13 @@ export function TaskDevelopmentEmptyState({
   projectId,
   layout = "panel",
   actions,
+  starting = false,
 }: {
   phase: Extract<TaskDevPhase, "no_repo" | "not_started">;
   projectId: string;
   layout?: "panel" | "inline";
   actions?: React.ReactNode;
+  starting?: boolean;
 }) {
   const { data: connectionData } = useGitConnectionQuery();
   const hasGitHubApp = Boolean(connectionData?.connection);
@@ -110,21 +112,29 @@ export function TaskDevelopmentEmptyState({
           },
           {
             title: "Start development on this task",
-            description:
-              "Creates a branch from the task key. Commits and diffs appear once you push.",
+            description: starting
+              ? "Creating branch on GitHub…"
+              : "Creates a branch from the task key. Commits and diffs appear once you push.",
             state: "active",
           },
         ];
 
   const title =
-    phase === "no_repo" ? "Set up development" : "Ready to start development";
+    phase === "no_repo"
+      ? "Set up development"
+      : starting
+        ? "Creating branch…"
+        : "Ready to start development";
   const description =
     phase === "no_repo"
       ? "Connect your repository to track branches, commits, pull requests, and code review — without leaving this task."
-      : "Your project is configured. Start development to create a branch and begin tracking work on this task.";
+      : starting
+        ? "Setting up your branch on GitHub. This may take a few seconds."
+        : "Your project is configured. Start development to create a branch and begin tracking work on this task.";
 
   return (
     <section
+      aria-busy={starting || undefined}
       className={cn(
         isPanel
           ? "flex h-full min-h-0 flex-col items-center justify-center px-6 py-8"

src/components/git/TaskDevelopmentSection.tsx

@@ -96,6 +96,7 @@ export function TaskDevelopmentSection({
   const [prUrl, setPrUrl] = useState("");
   const [selectedRepositoryId, setSelectedRepositoryId] = useState("");
   const [busy, setBusy] = useState(false);
+  const [startingDevelopment, setStartingDevelopment] = useState(false);
   const [advancedOpen, setAdvancedOpen] = useState(false);
   const [gitCommandsOpen, setGitCommandsOpen] = useState(false);
 
@@ -153,6 +154,27 @@ export function TaskDevelopmentSection({
       : "pending";
   const reviewStep: StepState = openPr ? "active" : pr ? "done" : "pending";
 
+  const handleStartDevelopment = async () => {
+    setStartingDevelopment(true);
+    try {
+      const result = await startDevelopment({
+        taskId,
+        repositoryId: selectedRepositoryId || undefined,
+      });
+      void navigator.clipboard.writeText(result.checkoutCommand);
+      toast.success("Development started — checkout command copied");
+    } catch (e) {
+      const message = formatClientError(e, "Failed to start development");
+      toast.error(
+        message.includes(MULTI_REPO_SELECTION_MESSAGE)
+          ? "Select a repository first"
+          : message
+      );
+    } finally {
+      setStartingDevelopment(false);
+    }
+  };
+
   const startDevelopmentActions = (
     <>
       {!branch && multipleRepos ? (
@@ -163,6 +185,7 @@ export function TaskDevelopmentSection({
           <Select
             value={selectedRepositoryId}
             onValueChange={setSelectedRepositoryId}
+            disabled={startingDevelopment}
           >
             <SelectTrigger
               id="task-dev-repo-empty"
@@ -182,30 +205,14 @@ export function TaskDevelopmentSection({
       ) : null}
       <Button
         type="button"
-        disabled={busy || (multipleRepos && !selectedRepositoryId)}
-        onClick={async () => {
-          setBusy(true);
-          try {
-            const result = await startDevelopment({
-              taskId,
-              repositoryId: selectedRepositoryId || undefined,
-            });
-            void navigator.clipboard.writeText(result.checkoutCommand);
-            toast.success("Development started — checkout command copied");
-          } catch (e) {
-            const message = formatClientError(e, "Failed to start development");
-            toast.error(
-              message.includes(MULTI_REPO_SELECTION_MESSAGE)
-                ? "Select a repository first"
-                : message
-            );
-          } finally {
-            setBusy(false);
-          }
-        }}
+        loading={startingDevelopment}
+        disabled={
+          startingDevelopment || busy || (multipleRepos && !selectedRepositoryId)
+        }
+        onClick={() => void handleStartDevelopment()}
       >
-        <Play className="size-3.5" />
-        Start development
+        {!startingDevelopment ? <Play className="size-3.5" /> : null}
+        {startingDevelopment ? "Starting…" : "Start development"}
       </Button>
     </>
   );
@@ -227,6 +234,7 @@ export function TaskDevelopmentSection({
           phase="not_started"
           projectId={projectId}
           layout="panel"
+          starting={startingDevelopment}
           actions={startDevelopmentActions}
         />
         <Collapsible
@@ -447,6 +455,7 @@ export function TaskDevelopmentSection({
             <Select
               value={selectedRepositoryId}
               onValueChange={setSelectedRepositoryId}
+              disabled={startingDevelopment}
             >
               <SelectTrigger id="task-dev-repo" className="h-8 w-full max-w-md">
                 <SelectValue placeholder="Select repository" />
@@ -469,33 +478,16 @@ export function TaskDevelopmentSection({
         {!branch ? (
           <Button
             type="button"
-            disabled={busy || (multipleRepos && !selectedRepositoryId)}
-            onClick={async () => {
-              setBusy(true);
-              try {
-                const result = await startDevelopment({
-                  taskId,
-                  repositoryId: selectedRepositoryId || undefined,
-                });
-                void navigator.clipboard.writeText(result.checkoutCommand);
-                toast.success("Development started — checkout command copied");
-              } catch (e) {
-                const message = formatClientError(
-                  e,
-                  "Failed to start development"
-                );
-                toast.error(
-                  message.includes(MULTI_REPO_SELECTION_MESSAGE)
-                    ? "Select a repository first"
-                    : message
-                );
-              } finally {
-                setBusy(false);
-              }
-            }}
+            loading={startingDevelopment}
+            disabled={
+              startingDevelopment ||
+              busy ||
+              (multipleRepos && !selectedRepositoryId)
+            }
+            onClick={() => void handleStartDevelopment()}
           >
-            <Play className="size-3.5" />
-            Start development
+            {!startingDevelopment ? <Play className="size-3.5" /> : null}
+            {startingDevelopment ? "Starting…" : "Start development"}
           </Button>
         ) : !openPr && !pr ? (
           <>