feat(clerk-js): Update ui of OrganizationSwitcher to better match OrganizationList

.changeset/popular-sloths-mate.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Organization Switcher now diplays organization invitations and suggestions in a more compact form.

packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+
+import { Box, Spinner } from '../customizables';
+
+export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <Box
+      ref={ref}
+      sx={t => ({
+        width: '100%',
+        height: t.space.$12,
+        position: 'relative',
+      })}
+    >
+      <Box
+        sx={{
+          margin: 'auto',
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translateY(-50%) translateX(-50%)',
+        }}
+      >
+        <Spinner
+          size='md'
+          colorScheme='primary'
+        />
+      </Box>
+    </Box>
+  );
+});

packages/clerk-js/src/ui/common/index.ts

@@ -2,6 +2,7 @@ export * from './BlockButtons';
 export * from './constants';
 export * from './CalloutWithAction';
 export * from './forms';
+export * from './InfiniteListSpinner';
 export * from './redirects';
 export * from './verification';
 export * from './withRedirectToHome';

packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx

@@ -4,10 +4,9 @@ import { Plus } from '../../../ui/icons';
 import { useCoreUser } from '../../contexts';
 import { descriptors, localizationKeys } from '../../customizables';
 import { Action, SecondaryActions } from '../../elements';
-import { UserInvitationList } from './UserInvitationList';
+import { UserInvitationSuggestionList } from './UserInvitationSuggestionList';
 import type { UserMembershipListProps } from './UserMembershipList';
 import { UserMembershipList } from './UserMembershipList';
-import { UserSuggestionList } from './UserSuggestionList';
 
 export interface OrganizationActionListProps extends UserMembershipListProps {
   onCreateOrganizationClick: React.MouseEventHandler;
@@ -43,11 +42,12 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
   const { onCreateOrganizationClick, onPersonalWorkspaceClick, onOrganizationClick } = props;
 
   return (
-    <SecondaryActions elementDescriptor={descriptors.organizationSwitcherPopoverActions}>
-      <UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
-      <UserInvitationList />
-      <UserSuggestionList />
-      <CreateOrganizationButton {...{ onCreateOrganizationClick }} />
-    </SecondaryActions>
+    <>
+      <UserInvitationSuggestionList />
+      <SecondaryActions elementDescriptor={descriptors.organizationSwitcherPopoverActions}>
+        <UserMembershipList {...{ onPersonalWorkspaceClick, onOrganizationClick }} />
+        <CreateOrganizationButton {...{ onCreateOrganizationClick }} />
+      </SecondaryActions>
+    </>
   );
 };