From ca1d6a959dcfc700fd301866f5c0a18d5723a8ee Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 3 Nov 2026 09:46:41 -0500
Subject: [PATCH] fix(mosaic): match OrganizationList skeleton to the loaded
 list

---
 .changeset/org-list-skeleton-avatars.md       |  5 ++
 .../organization-list.skeleton.tsx            | 48 ++++++++++++-------
 2 files changed, 37 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/org-list-skeleton-avatars.md

diff --git a/.changeset/org-list-skeleton-avatars.md b/.changeset/org-list-skeleton-avatars.md
new file mode 100644
index 00000000000..6cd3fab714d
--- /dev/null
+++ b/.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.
diff --git a/packages/mosaic/src/features/organization-list/organization-list.skeleton.tsx b/packages/mosaic/src/features/organization-list/organization-list.skeleton.tsx
index c75b2e6daa9..addba29d1d0 100644
--- a/packages/mosaic/src/features/organization-list/organization-list.skeleton.tsx
+++ b/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>
+  );
+}