fix(forms): Reserve space for auto-save indicator to prevent layout shift#114292
Merged
fix(forms): Reserve space for auto-save indicator to prevent layout shift#114292
Conversation
…hift 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>
github-actions
Bot
added
the
Scope: Frontend
JonasBa
approved these changes
Apr 29, 2026
natemoo-re
approved these changes
Apr 29, 2026
TkDodo
added a commit
that referenced
this pull request
May 3, 2026
…14293) Migrates the spike protection toggle from the legacy `BooleanField` / `FormField` system to `AutoSaveForm` with `field.Switch` from the new TanStack-based form system. **What changed:** - `spikeProtectionProjectToggle.tsx` — replaced `BooleanField` + manual `useState`/`useApi` with `AutoSaveForm`. The POST/DELETE API pattern (POST to enable, DELETE to disable) is handled in `mutationFn`. After a successful toggle, `ProjectsStore` is updated so that the project settings page (which reads from `ProjectContext` → `ProjectsStore`) reflects the new state without a full page reload. - `spikeProtectionProjectSettings.tsx` — replaced `Panel`/`PanelBody`/`PanelHeader` with `FieldGroup` for consistency with other migrated settings forms. - `spikeProtectionProjects.tsx` — removed `StyledPanelToggle` (which targeted legacy `FormField` CSS internals), replaced `AccordionRowContainer` with `Flex`, and cleaned up the `any` type cast on the `onChange` callback. - Added a test verifying `ProjectsStore.onUpdateSuccess` is called after a successful toggle. The toggle is used in two places: the spike protection settings list page (`settings/spike-protection/`) and the general project settings page (embedded via `<Hook>`). Both continue to work — the `<Hook>` component fix in #114289 ensures the toggle's mutation state survives parent re-renders on the project settings page. Refs DE-1191 depends on: - #114289 - #114292
cleptric
pushed a commit
that referenced
this pull request
May 5, 2026
…hift (#114292) When AutoSaveForm fields show the save indicator (spinner/checkmark), the indicator appearing and disappearing causes adjacent content to shift. This is especially noticeable for standalone switches (e.g. the spike protection toggle on the settings page) where the indicator pushes neighboring elements sideways. The fix reserves a 14px placeholder `Flex` when the indicator is not visible, matching the indicator's width. The placeholder is only rendered inside an `AutoSaveForm` context (`autoSaveContext` is non-null), so fields used outside of auto-save forms are unaffected. Applied consistently to `SwitchField`, `RadioField`, and `RangeField`. `SwitchField` previously had no placeholder at all; `RadioField` and `RangeField` unconditionally rendered the placeholder even outside auto-save forms. Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
cleptric
pushed a commit
that referenced
this pull request
May 5, 2026
…14293) Migrates the spike protection toggle from the legacy `BooleanField` / `FormField` system to `AutoSaveForm` with `field.Switch` from the new TanStack-based form system. **What changed:** - `spikeProtectionProjectToggle.tsx` — replaced `BooleanField` + manual `useState`/`useApi` with `AutoSaveForm`. The POST/DELETE API pattern (POST to enable, DELETE to disable) is handled in `mutationFn`. After a successful toggle, `ProjectsStore` is updated so that the project settings page (which reads from `ProjectContext` → `ProjectsStore`) reflects the new state without a full page reload. - `spikeProtectionProjectSettings.tsx` — replaced `Panel`/`PanelBody`/`PanelHeader` with `FieldGroup` for consistency with other migrated settings forms. - `spikeProtectionProjects.tsx` — removed `StyledPanelToggle` (which targeted legacy `FormField` CSS internals), replaced `AccordionRowContainer` with `Flex`, and cleaned up the `any` type cast on the `onChange` callback. - Added a test verifying `ProjectsStore.onUpdateSuccess` is called after a successful toggle. The toggle is used in two places: the spike protection settings list page (`settings/spike-protection/`) and the general project settings page (embedded via `<Hook>`). Both continue to work — the `<Hook>` component fix in #114289 ensures the toggle's mutation state survives parent re-renders on the project settings page. Refs DE-1191 depends on: - #114289 - #114292
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
When AutoSaveForm fields show the save indicator (spinner/checkmark), the indicator appearing and disappearing causes adjacent content to shift. This is especially noticeable for standalone switches (e.g. the spike protection toggle on the settings page) where the indicator pushes neighboring elements sideways.
The fix reserves a 14px placeholder
Flexwhen the indicator is not visible, matching the indicator's width. The placeholder is only rendered inside anAutoSaveFormcontext (autoSaveContextis non-null), so fields used outside of auto-save forms are unaffected.Applied consistently to
SwitchField,RadioField, andRangeField.SwitchFieldpreviously had no placeholder at all;RadioFieldandRangeFieldunconditionally rendered the placeholder even outside auto-save forms.