fix(settings): align skeleton layouts with actual component structures

- Fix list item gap from 12px to 8px across all skeletons (API keys, custom tools, credentials, MCP)
- Add OAuth icon placeholder to credential skeleton
- Fix credential button group gap from 8px to 4px
- Remove incorrect gap-[4px] from credential-sets text column
- Rebuild debug skeleton to match real layout (description + input/button row)
- Add scrollable wrapper to BYOK skeleton with more representative item count

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx

@@ -28,7 +28,7 @@ export function ApiKeysSkeleton() {
         <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
         <Skeleton className='h-[30px] w-[80px] rounded-[6px]' />
       </div>
-      <div className='flex flex-col gap-[12px]'>
+      <div className='flex flex-col gap-[8px]'>
         <ApiKeySkeleton />
         <ApiKeySkeleton />
       </div>

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

@@ -28,10 +28,14 @@ export function BYOKSkeleton() {
         <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 className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-[8px]'>
+          <BYOKKeySkeleton />
+          <BYOKKeySkeleton />
+          <BYOKKeySkeleton />
+          <BYOKKeySkeleton />
+          <BYOKKeySkeleton />
+        </div>
       </div>
     </div>
   )

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

@@ -15,7 +15,7 @@ export function CredentialSetsSkeleton() {
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[12px]'>
             <Skeleton className='h-9 w-9 rounded-[6px]' />
-            <div className='flex flex-col gap-[4px]'>
+            <div className='flex flex-col'>
               <Skeleton className='h-[14px] w-[120px]' />
               <Skeleton className='h-[12px] w-[80px]' />
             </div>
@@ -28,7 +28,7 @@ export function CredentialSetsSkeleton() {
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[12px]'>
             <Skeleton className='h-9 w-9 rounded-[6px]' />
-            <div className='flex flex-col gap-[4px]'>
+            <div className='flex flex-col'>
               <Skeleton className='h-[14px] w-[140px]' />
               <Skeleton className='h-[12px] w-[100px]' />
             </div>

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

@@ -2,15 +2,19 @@ import { Skeleton } from '@/components/emcn'
 
 /**
  * Skeleton component for credential list items.
+ * Includes an icon placeholder for OAuth credentials.
  */
 export function CredentialSkeleton() {
   return (
     <div className='flex items-center justify-between gap-[12px]'>
-      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <Skeleton className='h-[14px] w-[100px]' />
-        <Skeleton className='h-[13px] w-[200px]' />
+      <div className='flex min-w-0 items-center gap-[10px]'>
+        <Skeleton className='h-8 w-8 flex-shrink-0 rounded-[6px]' />
+        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+          <Skeleton className='h-[14px] w-[100px]' />
+          <Skeleton className='h-[13px] w-[200px]' />
+        </div>
       </div>
-      <div className='flex flex-shrink-0 items-center gap-[8px]'>
+      <div className='flex flex-shrink-0 items-center gap-[4px]'>
         <Skeleton className='h-[30px] w-[54px] rounded-[4px]' />
         <Skeleton className='h-[30px] w-[50px] rounded-[4px]' />
       </div>
@@ -28,7 +32,7 @@ export function CredentialsSkeleton() {
         <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
         <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
       </div>
-      <div className='flex flex-col gap-[12px]'>
+      <div className='flex flex-col gap-[8px]'>
         <CredentialSkeleton />
         <CredentialSkeleton />
         <CredentialSkeleton />

apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx

@@ -28,7 +28,7 @@ export function CustomToolsSkeleton() {
         <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
         <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
       </div>
-      <div className='flex flex-col gap-[12px]'>
+      <div className='flex flex-col gap-[8px]'>
         <CustomToolSkeleton />
         <CustomToolSkeleton />
         <CustomToolSkeleton />

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

@@ -2,12 +2,16 @@ import { Skeleton } from '@/components/emcn'
 
 /**
  * Skeleton for the Debug section shown during dynamic import loading.
+ * Matches the layout: description text + input/button row.
  */
 export function DebugSkeleton() {
   return (
-    <div className='flex flex-col gap-[8px]'>
-      <Skeleton className='h-5 w-[200px]' />
-      <Skeleton className='h-5 w-[140px]' />
+    <div className='flex h-full flex-col gap-[18px]'>
+      <Skeleton className='h-[14px] w-[340px]' />
+      <div className='flex gap-[8px]'>
+        <Skeleton className='h-9 flex-1 rounded-[6px]' />
+        <Skeleton className='h-9 w-[80px] rounded-[6px]' />
+      </div>
     </div>
   )
 }

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

@@ -11,7 +11,7 @@ export function McpSkeleton() {
         <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
         <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
       </div>
-      <div className='flex flex-col gap-[12px]'>
+      <div className='flex flex-col gap-[8px]'>
         <McpServerSkeleton />
         <McpServerSkeleton />
         <McpServerSkeleton />