From f62fddfac5ee4ad0e66fb1bcf5cafcd3a52aaa45 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Mon, 9 Mar 2026 20:45:35 -0700
Subject: [PATCH] improvement(settings): add search bar to skeleton loading
 states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Skeletons now include the search bar (and action button where applicable) so the layout matches the final component 1:1. Eliminates layout shift when the dynamic chunk loads — search bar area is already reserved by the skeleton.
---
 .../components/api-keys/api-key-skeleton.tsx      | 12 +++++++++---
 .../settings/components/byok/byok-skeleton.tsx    | 14 ++++++++++----
 .../credential-sets/credential-sets-skeleton.tsx  |  4 ++++
 .../credentials/credential-skeleton.tsx           | 14 ++++++++++----
 .../custom-tools/custom-tool-skeleton.tsx         | 14 ++++++++++----
 .../mcp-server-skeleton/mcp-server-skeleton.tsx   |  2 +-
 .../settings/components/mcp/mcp-skeleton.tsx      | 15 +++++++++++----
 7 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
index 44c82deae9..9f47a3f352 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
@@ -23,9 +23,15 @@ export function ApiKeySkeleton() {
  */
 export function ApiKeysSkeleton() {
   return (
-    <div className='flex flex-col gap-[12px]'>
-      <ApiKeySkeleton />
-      <ApiKeySkeleton />
+    <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex items-center gap-[8px]'>
+        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
+        <Skeleton className='h-[30px] w-[80px] rounded-[6px]' />
+      </div>
+      <div className='flex flex-col gap-[12px]'>
+        <ApiKeySkeleton />
+        <ApiKeySkeleton />
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
index f7e4ad85be..e91033dd0a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
@@ -23,10 +23,16 @@ export function BYOKKeySkeleton() {
  */
 export function BYOKSkeleton() {
   return (
-    <div className='flex flex-col gap-[12px]'>
-      <BYOKKeySkeleton />
-      <BYOKKeySkeleton />
-      <BYOKKeySkeleton />
+    <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex items-center gap-[8px]'>
+        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
+      </div>
+      <Skeleton className='h-[14px] w-[280px]' />
+      <div className='flex flex-col gap-[8px]'>
+        <BYOKKeySkeleton />
+        <BYOKKeySkeleton />
+        <BYOKKeySkeleton />
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
index 4836eb6653..558c84c619 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
@@ -6,6 +6,10 @@ import { Skeleton } from '@/components/emcn'
 export function CredentialSetsSkeleton() {
   return (
     <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex items-center gap-[8px]'>
+        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
+        <Skeleton className='h-[30px] w-[80px] rounded-[6px]' />
+      </div>
       <div className='flex flex-col gap-[8px]'>
         <Skeleton className='h-[14px] w-[100px]' />
         <div className='flex items-center justify-between'>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx
index 9041e4eab6..ed688dfc46 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx
@@ -23,10 +23,16 @@ export function CredentialSkeleton() {
  */
 export function CredentialsSkeleton() {
   return (
-    <div className='flex flex-col gap-[12px]'>
-      <CredentialSkeleton />
-      <CredentialSkeleton />
-      <CredentialSkeleton />
+    <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex items-center gap-[8px]'>
+        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
+        <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
+      </div>
+      <div className='flex flex-col gap-[12px]'>
+        <CredentialSkeleton />
+        <CredentialSkeleton />
+        <CredentialSkeleton />
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
index 94bea6af4e..d577d8306d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
@@ -23,10 +23,16 @@ export function CustomToolSkeleton() {
  */
 export function CustomToolsSkeleton() {
   return (
-    <div className='flex flex-col gap-[12px]'>
-      <CustomToolSkeleton />
-      <CustomToolSkeleton />
-      <CustomToolSkeleton />
+    <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex items-center gap-[8px]'>
+        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
+        <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
+      </div>
+      <div className='flex flex-col gap-[12px]'>
+        <CustomToolSkeleton />
+        <CustomToolSkeleton />
+        <CustomToolSkeleton />
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
index 5bbe738301..a0c34a19cc 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from '@/components/ui'
+import { Skeleton } from '@/components/emcn'
 
 /**
  * Skeleton loader for MCP server list items.
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
index 45ffcdcfbd..79f574d035 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
@@ -1,3 +1,4 @@
+import { Skeleton } from '@/components/emcn'
 import { McpServerSkeleton } from '@/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton'
 
 /**
@@ -5,10 +6,16 @@ import { McpServerSkeleton } from '@/app/workspace/[workspaceId]/settings/compon
  */
 export function McpSkeleton() {
   return (
-    <div className='flex flex-col gap-[12px]'>
-      <McpServerSkeleton />
-      <McpServerSkeleton />
-      <McpServerSkeleton />
+    <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex items-center gap-[8px]'>
+        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
+        <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
+      </div>
+      <div className='flex flex-col gap-[12px]'>
+        <McpServerSkeleton />
+        <McpServerSkeleton />
+        <McpServerSkeleton />
+      </div>
     </div>
   )
 }