fix(ui): Fix OrganizationSwitcher avatar flash and polish popover styling by maxyinger · Pull Request #9112 · clerk/javascript

maxyinger · 2026-07-09T00:31:09Z

Description

makes org switcher row heights consistent (was like 3px off before)
adds sticky open style to popover trigger (standard ala vercel & notion for popovers)
removes avatar flash on first render of org popover (more noticeable on dark mode, screenshot of the frame below)

Before	After

Follow up PR imporving popover anims here

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

Summary by CodeRabbit

New Features
- Improved the organization switcher’s open state with clearer visual highlighting.
- Made newly loaded avatars appear more smoothly on first display.
Bug Fixes
- Reduced brief background flashing when avatars mount.
- Aligned the “Create organization” action row with the rest of the menu items for a more consistent layout.

changeset-bot · 2026-07-09T00:31:13Z

🦋 Changeset detected

Latest commit: 3c2c3fb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-07-09T00:31:15Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 9, 2026 5:52pm
swingset	Ready	Preview, Comment	Jul 9, 2026 5:52pm

coderabbitai · 2026-07-09T00:33:31Z

📝 Walkthrough

Walkthrough

This PR patches @clerk/ui's <OrganizationSwitcher /> with three styling adjustments: synchronous avatar image decoding to avoid a background flash, highlighted trigger styling when expanded, and aligned padding/icon sizing for the "Create organization" action row. A changeset documents these changes.

Changes

OrganizationSwitcher Polish

Layer / File(s)	Summary
Trigger expanded highlight `packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx`	Adds `sx` styling for `aria-expanded="true"` state, setting background and accent colors.
Action row sizing `packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx`	Adjusts button padding and icon box height to match other list row heights.
Avatar sync decoding `packages/ui/src/elements/Avatar.tsx`	Sets `decoding="sync"` on the avatar's `Image` element with explanatory comments to avoid a first-render flash.
Changeset `.changeset/org-switcher-polish.md`	Documents the patch release covering all three adjustments.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Poem

Hop, hop, a trigger glows so bright,
Avatars decode before first light,
Rows aligned, no bumps in sight,
A tiny patch, done just right,
🐰✨ Ship it tonight!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main user-facing changes: fixing the avatar flash and polishing OrganizationSwitcher popover styling.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-07-09T00:33:54Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9112

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9112

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9112

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9112

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9112

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9112

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9112

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9112

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9112

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9112

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9112

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9112

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9112

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9112

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9112

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9112

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9112

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9112

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9112

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9112

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9112

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9112

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9112

commit: 3c2c3fb

github-actions · 2026-07-09T00:34:30Z

API Changes Report

Generated by Break Check on 2026-07-09T17:54:27.867Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

Report generated by Break Check

_{Last ran on 3c2c3fb.}

alexcarpenter · 2026-07-09T13:53:23Z

+        // Decode the (typically cached) avatar bytes before presenting so a freshly-mounted
+        // <img> paints on its first frame instead of flashing the avatar background for a tick.
+        // Safe for avatar-sized images: decode is off-thread/sub-ms and only affects already-fetched bytes.
+        decoding='sync'


This is used throughout the components, so a org profiles members tab has this used in the table. Do you think this is ok? I am not to familiar with the impacts of usage here.

Yea was chatting with claude abt this. they're basically all so small and all our lists are capped from pagination at around 10 that it is negligible. shouldn't use it willy nilly, but in this case we're fine

alexcarpenter · 2026-07-09T13:53:37Z

+            '&[aria-expanded="true"]': {
+              backgroundColor: 'var(--alpha)',
+              color: 'var(--accentHover)',
+            },


github-actions Bot added the ui label Jul 9, 2026

maxyinger mentioned this pull request Jul 9, 2026

feat(ui): Origin-aware open/close animations for popover menus and selects #9113

Open

9 tasks

alexcarpenter reviewed Jul 9, 2026

View reviewed changes

maxyinger added 3 commits July 9, 2026 11:43

sticky styles for toggle when open

8e78047

consistent row height for create org. remove avatar flash on open

b9798c1

changeset

3c2c3fb

maxyinger force-pushed the max/org-switcher-polish branch from 412b25f to 3c2c3fb Compare July 9, 2026 17:50

vercel Bot deployed to Preview – clerk-js-sandbox July 9, 2026 17:51 View deployment

vercel Bot deployed to Preview – swingset July 9, 2026 17:52 View deployment

alexcarpenter approved these changes Jul 9, 2026

View reviewed changes

alexcarpenter merged commit 26aa837 into main Jul 9, 2026
50 checks passed

alexcarpenter deleted the max/org-switcher-polish branch July 9, 2026 18:34

clerk-cookie mentioned this pull request Jul 9, 2026

ci(repo): Version packages #9117

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): Fix OrganizationSwitcher avatar flash and polish popover styling#9112

fix(ui): Fix OrganizationSwitcher avatar flash and polish popover styling#9112
alexcarpenter merged 3 commits into
mainfrom
max/org-switcher-polish

maxyinger commented Jul 9, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 9, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

pkg-pr-new Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

alexcarpenter Jul 9, 2026

Uh oh!

maxyinger Jul 9, 2026

Uh oh!

alexcarpenter Jul 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

maxyinger commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

pkg-pr-new Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

API Changes Report

Summary

No API Changes Detected

Uh oh!

alexcarpenter Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

maxyinger Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

alexcarpenter Jul 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

maxyinger commented Jul 9, 2026 •

edited

Loading

changeset-bot Bot commented Jul 9, 2026 •

edited

Loading

vercel Bot commented Jul 9, 2026 •

edited

Loading

coderabbitai Bot commented Jul 9, 2026 •

edited

Loading

pkg-pr-new Bot commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading