improvement(settings): add search bar to skeleton loading states

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.

Author: waleedlatif1

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>
   )
 }

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>
   )
 }

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

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>
   )
 }

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>
   )
 }

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.

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx

@@ -1,14 +1,21 @@
+import { Skeleton } from '@/components/emcn'
 import { McpServerSkeleton } from '@/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton'
 
 /**
  * Skeleton for the MCP section shown during dynamic import loading.
  */
 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>
   )
 }