fix(mosaic): match OrganizationList skeleton to the loaded list (#10608)

Author: alexcarpenter

.changeset/org-list-skeleton-avatars.md

@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Fix the `OrganizationList` loading skeleton. Avatar placeholders now match the size of the loaded avatars instead of shrinking to the width of the initials, and the personal account row is shown unless `hidePersonal` is set.

packages/mosaic/src/features/organization-list/organization-list.skeleton.tsx

@@ -27,26 +27,42 @@ export function OrganizationListSkeleton({
           variant='outline'
           aria-hidden
         >
+          {hidePersonal ? null : (
+            <SkeletonRow
+              name={m.personal}
+              shape='circle'
+            />
+          )}
           {PLACEHOLDER_ORGANIZATIONS.map(name => (
-            <Item.Root key={name}>
-              <Item.Media>
-                <Skeleton>
-                  <RowAvatar
-                    name={name}
-                    shape='square'
-                    size='fit'
-                  />
-                </Skeleton>
-              </Item.Media>
-              <Item.Content>
-                <Item.Label>
-                  <Skeleton>{name}</Skeleton>
-                </Item.Label>
-              </Item.Content>
-            </Item.Root>
+            <SkeletonRow
+              key={name}
+              name={name}
+              shape='square'
+            />
           ))}
         </Item.Group>
       </Card.Content>
     </Card.Root>
   );
 }
+
+function SkeletonRow({ name, shape }: { name: string; shape: 'circle' | 'square' }) {
+  return (
+    <Item.Root>
+      <Skeleton shape={shape === 'circle' ? 'pill' : 'rounded'}>
+        <Item.Media>
+          <RowAvatar
+            name={name}
+            shape={shape}
+            size='fit'
+          />
+        </Item.Media>
+      </Skeleton>
+      <Item.Content>
+        <Item.Label>
+          <Skeleton>{name}</Skeleton>
+        </Item.Label>
+      </Item.Content>
+    </Item.Root>
+  );
+}