From 4bce7589a8fcf51c2ce9eb0167d15def9dfbb7b4 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Sat, 24 Jan 2026 11:02:37 -0600
Subject: [PATCH] fix: prevent layout flash in New Workspace page

- Skip 'restore remembered config' effect on initial mount since useState
  initializer already handles correct initial values
- Add loading placeholder skeleton for branch selector to reserve space
  while branches load async
---
 src/browser/components/ChatInput/CreationControls.tsx | 9 +++++++++
 src/browser/hooks/useDraftWorkspaceSettings.ts        | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/browser/components/ChatInput/CreationControls.tsx b/src/browser/components/ChatInput/CreationControls.tsx
index 07a5d88065..4ba8669c30 100644
--- a/src/browser/components/ChatInput/CreationControls.tsx
+++ b/src/browser/components/ChatInput/CreationControls.tsx
@@ -253,6 +253,8 @@ export function CreationControls(props: CreationControlsProps) {
   const availabilityMap =
     runtimeAvailabilityState.status === "loaded" ? runtimeAvailabilityState.data : null;
   const showTrunkBranchSelector = props.branches.length > 0 && runtimeMode !== RUNTIME_MODE.LOCAL;
+  // Show loading skeleton while branches are loading to avoid layout flash
+  const showBranchLoadingPlaceholder = !props.branchesLoaded && runtimeMode !== RUNTIME_MODE.LOCAL;
 
   // Centralized devcontainer selection logic
   const devcontainerSelection = resolveDevcontainerSelection({
@@ -498,6 +500,13 @@ export function CreationControls(props: CreationControlsProps) {
               />
             </div>
           )}
+          {/* Loading placeholder - reserves space while branches load to avoid layout flash */}
+          {showBranchLoadingPlaceholder && (
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-xs">from</span>
+              <div className="bg-bg-dark/50 h-7 w-24 animate-pulse rounded-md" />
+            </div>
+          )}
 
           {/* SSH Host Input - hidden when Coder is enabled */}
           {selectedRuntime.mode === "ssh" && !props.coderProps?.enabled && (
diff --git a/src/browser/hooks/useDraftWorkspaceSettings.ts b/src/browser/hooks/useDraftWorkspaceSettings.ts
index e2ffc8d4ae..525b8df2ce 100644
--- a/src/browser/hooks/useDraftWorkspaceSettings.ts
+++ b/src/browser/hooks/useDraftWorkspaceSettings.ts
@@ -295,10 +295,11 @@ export function useDraftWorkspaceSettings(
 
   // When the user switches into SSH/Docker/Devcontainer mode, seed the field with the remembered config.
   // This avoids clearing the last values when the UI switches modes with an empty field.
+  // Skip on initial mount (prevMode === null) since useState initializer handles that case.
   const prevSelectedRuntimeModeRef = useRef<RuntimeMode | null>(null);
   useEffect(() => {
     const prevMode = prevSelectedRuntimeModeRef.current;
-    if (prevMode !== selectedRuntime.mode) {
+    if (prevMode !== null && prevMode !== selectedRuntime.mode) {
       if (selectedRuntime.mode === RUNTIME_MODE.SSH) {
         const needsHostRestore = !selectedRuntime.host.trim() && lastSshHost.trim();
         const needsCoderRestore =