Skip to content

fix(create): left-panel selections flicker and do not stay selected#10930

Open
ShauryaaSharma wants to merge 1 commit into
shadcn-ui:mainfrom
ShauryaaSharma:fix/create-page-panel-flicker
Open

fix(create): left-panel selections flicker and do not stay selected#10930
ShauryaaSharma wants to merge 1 commit into
shadcn-ui:mainfrom
ShauryaaSharma:fix/create-page-panel-flicker

Conversation

@ShauryaaSharma

@ShauryaaSharma ShauryaaSharma commented Jun 12, 2026

Copy link
Copy Markdown

Fixes #10910

Problem

On the /create page, selecting any option from the left-side configuration
panel (Base Color, Theme, Style, Font, Radius, etc.) would flicker and not
stay selected. The selection would briefly appear then reset, making the
customizer unusable.

Root Cause

Two compounding issues:

1. Non-shallow routing on every selection

useDesignSystemSearchParams defaulted to shallow: false, which triggered
a full Next.js server navigation on every picker click. This caused the page
to re-suspend mid-render, visually resetting the panel state while the URL
update propagated.

2. Racing setParams call in ThemePicker

ThemePicker had a useEffect that fired setParams({ theme: themes[0].name })
whenever currentTheme was undefined. After a baseColor change, there is a
brief render window where currentTheme appears undefined — causing a second
competing setParams call that raced against the first and produced the
back-and-forth oscillation.

Fix

search-params.ts — changed default to shallow: true in
useDesignSystemSearchParams. This matches how DesignSystemProvider already
calls it and prevents unnecessary server navigations on picker selections.

theme-picker.tsx — removed the redundant useEffect. Theme validation
and fallback is already handled authoritatively by normalizeDesignSystemParams
in search-params.ts, so the effect was never needed and only introduced a race condition.

Testing

Tested on http://localhost:4000/create?template=start across all browsers:

  • Base Color, Theme, Style, Font, Heading Font, Radius, Icon Library, Menu Color
    all hold selection without flickering
  • Changing Base Color correctly resets Theme to a valid value without oscillating
  • Rapidly switching between options produces no flicker or state reset
  • URL correctly updates to ?preset=CODE format and selection persists on reload

@vercel

vercel Bot commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

@ShauryaaSharma is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@ShauryaaSharma ShauryaaSharma changed the title fix(create): resolve left-panel selection flicker by enabling shallow… fix(create): left-panel selections flicker and do not stay selected Jun 12, 2026
… routing and removing racing setParams effect
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: /create page left-side panel selections flicker and do not stay selected

1 participant