diff --git a/.changeset/org-switcher-polish.md b/.changeset/org-switcher-polish.md new file mode 100644 index 00000000000..417a3e92405 --- /dev/null +++ b/.changeset/org-switcher-polish.md @@ -0,0 +1,9 @@ +--- +'@clerk/ui': patch +--- + +Polish the ``: + +- 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. diff --git a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx index f410052f286..efad1c0b34e 100644 --- a/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx +++ b/packages/ui/src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx @@ -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)', + }, }), sx, ]} diff --git a/packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx index d4f0c828f04..5d3fbd798d9 100644 --- a/packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx +++ b/packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx @@ -26,7 +26,7 @@ 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, @@ -34,7 +34,7 @@ const CreateOrganizationButton = ({ })} iconBoxSx={t => ({ width: t.sizes.$9, - height: t.sizes.$6, + height: t.sizes.$9, })} spinnerSize='sm' /> diff --git a/packages/ui/src/elements/Avatar.tsx b/packages/ui/src/elements/Avatar.tsx index 2560197a913..0b689d9033f 100644 --- a/packages/ui/src/elements/Avatar.tsx +++ b/packages/ui/src/elements/Avatar.tsx @@ -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 + // 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' sx={{ objectFit: 'cover', width: '100%',