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

.changeset/org-switcher-polish.md

@@ -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.

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,
         ]}

packages/ui/src/components/OrganizationSwitcher/OtherOrganizationActions.tsx

@@ -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'
     />

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
+        // <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'
         sx={{
           objectFit: 'cover',
           width: '100%',