From 5f6c525908a846be5476e0e7568e19a9c9e0f64c Mon Sep 17 00:00:00 2001 From: ShauryaaSharma Date: Sat, 13 Jun 2026 00:16:19 +0530 Subject: [PATCH] fix(create): resolve left-panel selection flicker by enabling shallow routing and removing racing setParams effect --- apps/v4/app/(app)/create/components/theme-picker.tsx | 10 +++++----- apps/v4/app/(app)/create/lib/search-params.ts | 6 +++++- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/apps/v4/app/(app)/create/components/theme-picker.tsx b/apps/v4/app/(app)/create/components/theme-picker.tsx index b3d3b47c69f..7a217da64cc 100644 --- a/apps/v4/app/(app)/create/components/theme-picker.tsx +++ b/apps/v4/app/(app)/create/components/theme-picker.tsx @@ -38,11 +38,11 @@ export function ThemePicker({ [params.theme] ) - React.useEffect(() => { - if (!currentTheme && themes.length > 0) { - setParams({ theme: themes[0].name }) - } - }, [currentTheme, themes, setParams]) + // NOTE: The useEffect that called setParams({ theme: themes[0].name }) when + // currentTheme was undefined has been removed. Theme validation and fallback + // is already handled by normalizeDesignSystemParams in search-params.ts. + // The effect was causing a second racing setParams call after baseColor + // changes, which produced the flickering/selection-reset bug (#10910). return (
diff --git a/apps/v4/app/(app)/create/lib/search-params.ts b/apps/v4/app/(app)/create/lib/search-params.ts index e2a16a5226f..bd7bbdcb583 100644 --- a/apps/v4/app/(app)/create/lib/search-params.ts +++ b/apps/v4/app/(app)/create/lib/search-params.ts @@ -238,10 +238,14 @@ function resolvePresetParams( // Wraps nuqs useQueryStates with transparent preset encoding/decoding. // - Reads: if ?preset=CODE is in the URL, decodes it and returns individual values. // - Writes: when design system params are set, encodes them into a preset code. +// +// Default options use shallow: true so picker selections do not trigger a full +// Next.js server navigation. This prevents the customizer panel from flickering +// or resetting while the URL update propagates (#10910). export function useDesignSystemSearchParams(options: Options = {}) { const searchParams = useSearchParams() const [rawParams, rawSetParams] = useQueryStates(designSystemSearchParams, { - shallow: false, + shallow: true, history: "push", ...options, })