Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexcarpenter merged 3 commits into from
Jul 9, 2026
+19 −2
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e78047
sticky styles for toggle when open
maxyinger Jul 8, 2026
b9798c1
consistent row height for create org. remove avatar flash on open
maxyinger Jul 8, 2026
3c2c3fb
changeset
maxyinger Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .changeset/org-switcher-polish.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
'@clerk/ui': patch
---

Polish the `<OrganizationSwitcher />`:

- Decode avatar images synchronously so a freshly mounted avatar (e.g. when the popover opens) paints on its first frame instead of briefly flashing the avatar background.
- Highlight the trigger while its popover is open.
- Align the "Create organization" action's height with the other rows for a consistent list.
4 changes: 4 additions & 0 deletions packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
t => ({
padding: `${t.space.$1} ${t.space.$2}`,
position: 'relative',
'&[aria-expanded="true"]': {
backgroundColor: 'var(--alpha)',
color: 'var(--accentHover)',
},
Comment on lines +46 to +49

@alexcarpenter alexcarpenter Jul 9, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

}),
sx,
]}
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@ const CreateOrganizationButton = ({
label={localizationKeys('organizationSwitcher.action__createOrganization')}
onClick={onCreateOrganizationClick}
sx={t => ({
padding: `${t.space.$5} ${t.space.$5}`,
padding: `${t.space.$4} ${t.space.$5}`,
})}
iconSx={t => ({
width: t.sizes.$9,
height: t.sizes.$6,
})}
iconBoxSx={t => ({
width: t.sizes.$9,
height: t.sizes.$6,
height: t.sizes.$9,
})}
spinnerSize='sm'
/>
Expand Down
4 changes: 4 additions & 0 deletions packages/ui/src/elements/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,10 @@ export const Avatar = (props: AvatarProps) => {
title={title}
alt={`${title}'s logo`}
src={imageUrl || ''}
// 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'

@alexcarpenter alexcarpenter Jul 9, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@maxyinger maxyinger Jul 9, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

sx={{
objectFit: 'cover',
width: '100%',
Expand Down
Loading