From 4589915c37ea1590e4b522140fa07c50c89d4cfd Mon Sep 17 00:00:00 2001
From: TkDodo <office@dorfmeister.cc>
Date: Wed, 29 Apr 2026 13:15:17 +0200
Subject: [PATCH] fix(forms): Reserve space for auto-save indicator to prevent
 layout shift

When AutoSaveForm fields show the save indicator (spinner/checkmark),
the indicator appearing and disappearing causes adjacent content to
shift. Reserve a 14px placeholder when the indicator is not visible,
but only inside an AutoSaveForm context so non-auto-save usage is
unaffected.

Apply to SwitchField, RadioField, and RangeField consistently.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 static/app/components/core/form/field/radioField.tsx  | 2 +-
 static/app/components/core/form/field/rangeField.tsx  | 2 +-
 static/app/components/core/form/field/switchField.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/app/components/core/form/field/radioField.tsx b/static/app/components/core/form/field/radioField.tsx
index b9fd34fe4acfd2..d7a940631cf534 100644
--- a/static/app/components/core/form/field/radioField.tsx
+++ b/static/app/components/core/form/field/radioField.tsx
@@ -67,7 +67,7 @@ function RadioGroup({children, value, onChange, disabled}: RadioGroupProps) {
       <RadioContext value={contextValue}>
         <Flex role="radiogroup" aria-labelledby={labelId} gap="sm" align="center">
           {children}
-          {indicator ?? <Flex width="14px" flexShrink={0} />}
+          {indicator ?? (autoSaveContext ? <Flex width="14px" flexShrink={0} /> : null)}
           <FieldMeta.Status disabled={disabled} />
         </Flex>
       </RadioContext>
diff --git a/static/app/components/core/form/field/rangeField.tsx b/static/app/components/core/form/field/rangeField.tsx
index 4827bc26b2a7fc..73627adb67df60 100644
--- a/static/app/components/core/form/field/rangeField.tsx
+++ b/static/app/components/core/form/field/rangeField.tsx
@@ -36,7 +36,7 @@ export function RangeField({
               }
             }}
           />
-          {indicator ?? <Flex width="14px" flexShrink={0} />}
+          {indicator ?? (autoSaveContext ? <Flex width="14px" flexShrink={0} /> : null)}
         </Fragment>
       )}
     </BaseField>
diff --git a/static/app/components/core/form/field/switchField.tsx b/static/app/components/core/form/field/switchField.tsx
index a5457deb022a69..bdb19cab01b090 100644
--- a/static/app/components/core/form/field/switchField.tsx
+++ b/static/app/components/core/form/field/switchField.tsx
@@ -35,7 +35,7 @@ export function SwitchField({
               }
             }}
           />
-          {indicator}
+          {indicator ?? (autoSaveContext ? <Flex width="14px" flexShrink={0} /> : null)}
         </Flex>
       )}
     </BaseField>