From f5cd0afe090a22b5958483ae027ce546f466083e Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 4 Apr 2026 18:55:32 -0700
Subject: [PATCH 1/3] fix(settings): align skeleton loading states with actual
 page layouts

---
 .../settings/[section]/settings.tsx           |  6 +-
 .../components/admin/admin-skeleton.tsx       | 61 ++++++++++++++-
 .../components/api-keys/api-key-skeleton.tsx  | 34 ++++++--
 .../settings/components/api-keys/api-keys.tsx | 19 +++--
 .../components/byok/byok-skeleton.tsx         |  9 ++-
 .../credentials/credential-skeleton.tsx       | 65 +++++++++++-----
 .../custom-tools/custom-tool-skeleton.tsx     |  6 +-
 .../components/general/general-skeleton.tsx   |  4 +-
 .../components/inbox/inbox-skeleton.tsx       | 77 ++++++++++++++-----
 .../integrations/integrations-skeleton.tsx    | 43 +++++++++++
 .../mcp-server-skeleton.tsx                   |  6 +-
 .../deleted-item-skeleton.tsx                 |  2 +-
 .../recently-deleted-skeleton.tsx             | 36 +++++++++
 13 files changed, 303 insertions(+), 65 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
index 352a0cfd334..339655b467e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
@@ -16,8 +16,10 @@ import { CredentialsSkeleton } from '@/app/workspace/[workspaceId]/settings/comp
 import { CustomToolsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton'
 import { GeneralSkeleton } from '@/app/workspace/[workspaceId]/settings/components/general/general-skeleton'
 import { InboxSkeleton } from '@/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton'
+import { IntegrationsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton'
 import { McpSkeleton } from '@/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton'
 import { SkillsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/skills/skill-skeleton'
+import { RecentlyDeletedSkeleton } from '@/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton'
 import { WorkflowMcpServersSkeleton } from '@/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers-skeleton'
 import type { SettingsSection } from '@/app/workspace/[workspaceId]/settings/navigation'
 import {
@@ -52,7 +54,7 @@ const Integrations = dynamic(
     import('@/app/workspace/[workspaceId]/settings/components/integrations/integrations').then(
       (m) => m.Integrations
     ),
-  { loading: () => <CredentialsSkeleton /> }
+  { loading: () => <IntegrationsSkeleton /> }
 )
 const Credentials = dynamic(
   () =>
@@ -145,7 +147,7 @@ const RecentlyDeleted = dynamic(
     import(
       '@/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted'
     ).then((m) => m.RecentlyDeleted),
-  { loading: () => <SettingsSectionSkeleton /> }
+  { loading: () => <RecentlyDeletedSkeleton /> }
 )
 const AccessControl = dynamic(
   () => import('@/ee/access-control/components/access-control').then((m) => m.AccessControl),
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
index 5fc7bfcf968..7d59942f89e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
@@ -1,12 +1,21 @@
 import { Skeleton } from '@/components/emcn'
 
+/**
+ * Skeleton component for admin settings loading state.
+ * Matches the exact layout structure of the Admin component.
+ */
 export function AdminSkeleton() {
   return (
     <div className='flex h-full flex-col gap-6'>
+      {/* Super admin mode toggle */}
       <div className='flex items-center justify-between'>
         <Skeleton className='h-[14px] w-[120px]' />
         <Skeleton className='h-[20px] w-[36px] rounded-full' />
       </div>
+
+      <div className='h-px bg-[var(--border-secondary)]' />
+
+      {/* Workflow import section */}
       <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[340px]' />
         <div className='flex gap-2'>
@@ -14,9 +23,57 @@ export function AdminSkeleton() {
           <Skeleton className='h-9 w-[80px] rounded-md' />
         </div>
       </div>
-      <div className='flex flex-col gap-2'>
+
+      <div className='h-px bg-[var(--border-secondary)]' />
+
+      {/* User management section */}
+      <div className='flex flex-col gap-3'>
         <Skeleton className='h-[14px] w-[120px]' />
-        <Skeleton className='h-[200px] w-full rounded-lg' />
+
+        {/* Search input + button */}
+        <div className='flex gap-2'>
+          <Skeleton className='h-9 flex-1 rounded-md' />
+          <Skeleton className='h-9 w-[80px] rounded-md' />
+        </div>
+
+        {/* Table */}
+        <div className='flex flex-col gap-0.5'>
+          {/* Column headers */}
+          <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2'>
+            <Skeleton className='h-[12px] w-[200px]' />
+            <Skeleton className='h-[12px] flex-1' />
+            <Skeleton className='h-[12px] w-[80px]' />
+            <Skeleton className='h-[12px] w-[80px]' />
+            <Skeleton className='h-[12px] w-[250px]' />
+          </div>
+
+          {/* Table rows */}
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div
+              key={i}
+              className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 last:border-b-0'
+            >
+              <Skeleton className='h-[14px] w-[200px]' />
+              <Skeleton className='h-[14px] flex-1' />
+              <Skeleton className='h-[20px] w-[50px] rounded-full' />
+              <Skeleton className='h-[20px] w-[50px] rounded-full' />
+              <div className='flex w-[250px] justify-end gap-1'>
+                <Skeleton className='h-[28px] w-[80px] rounded-md' />
+                <Skeleton className='h-[28px] w-[64px] rounded-md' />
+                <Skeleton className='h-[28px] w-[40px] rounded-md' />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Pagination */}
+        <div className='flex items-center justify-between'>
+          <Skeleton className='h-[14px] w-[160px]' />
+          <div className='flex gap-1'>
+            <Skeleton className='h-[28px] w-[64px] rounded-md' />
+            <Skeleton className='h-[28px] w-[48px] rounded-md' />
+          </div>
+        </div>
       </div>
     </div>
   )
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 2840852df87..905be870655 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
@@ -24,13 +24,37 @@ export function ApiKeySkeleton() {
 export function ApiKeysSkeleton() {
   return (
     <div className='flex h-full flex-col gap-4.5'>
+      {/* Search bar and Create button */}
       <div className='flex items-center gap-2'>
-        <Skeleton className='h-[30px] flex-1 rounded-lg' />
-        <Skeleton className='h-[30px] w-[80px] rounded-md' />
+        <Skeleton className='h-[38px] flex-1 rounded-lg' />
+        <Skeleton className='h-[38px] w-[90px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-2'>
-        <ApiKeySkeleton />
-        <ApiKeySkeleton />
+
+      {/* Scrollable content area */}
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-4.5'>
+          {/* Workspace section */}
+          <div className='flex flex-col gap-2'>
+            <Skeleton className='h-5 w-[80px]' />
+            <Skeleton className='h-5 w-[180px]' />
+          </div>
+
+          {/* Personal section */}
+          <div className='flex flex-col gap-2'>
+            <Skeleton className='h-5 w-[60px]' />
+            <ApiKeySkeleton />
+            <ApiKeySkeleton />
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom toggle section */}
+      <div className='mt-6 flex items-center justify-between'>
+        <div className='flex items-center gap-2'>
+          <Skeleton className='h-5 w-[170px]' />
+          <Skeleton className='h-3 w-3 rounded-full' />
+        </div>
+        <Skeleton className='h-5 w-9 rounded-full' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index d60b76eeffd..5db8c7d592f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -158,14 +158,14 @@ export function ApiKeys() {
       <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
         {isLoading ? (
           <div className='flex flex-col gap-4.5'>
+            {/* Workspace section header */}
             <div className='flex flex-col gap-2'>
-              <Skeleton className='h-5 w-[70px]' />
-              <div className='text-[var(--text-muted)] text-sm'>
-                <Skeleton className='h-5 w-[140px]' />
-              </div>
+              <Skeleton className='h-5 w-[80px]' />
+              <Skeleton className='h-5 w-[180px]' />
             </div>
+            {/* Personal section header + keys */}
             <div className='flex flex-col gap-2'>
-              <Skeleton className='h-5 w-[55px]' />
+              <Skeleton className='h-5 w-[60px]' />
               <ApiKeySkeleton />
               <ApiKeySkeleton />
             </div>
@@ -310,6 +310,15 @@ export function ApiKeys() {
       </div>
 
       {/* Allow Personal API Keys Toggle - Fixed at bottom */}
+      {isLoading && canManageWorkspaceKeys && (
+        <div className='mt-6 flex items-center justify-between'>
+          <div className='flex items-center gap-2'>
+            <Skeleton className='h-5 w-[170px]' />
+            <Skeleton className='h-3 w-3 rounded-full' />
+          </div>
+          <Skeleton className='h-5 w-9 rounded-full' />
+        </div>
+      )}
       {!isLoading && canManageWorkspaceKeys && (
         <Tooltip.Provider delayDuration={150}>
           <div className='mt-6 flex items-center justify-between'>
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 de080c3c23b..ead1b66fbc9 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
@@ -9,11 +9,14 @@ export function BYOKKeySkeleton() {
       <div className='flex items-center gap-3'>
         <Skeleton className='h-9 w-9 flex-shrink-0 rounded-md' />
         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-          <Skeleton className='h-[14px] w-[100px]' />
-          <Skeleton className='h-[13px] w-[200px]' />
+          <Skeleton className='h-[16px] w-[100px]' />
+          <Skeleton className='h-[14px] w-[200px]' />
         </div>
       </div>
-      <Skeleton className='h-[32px] w-[72px] rounded-md' />
+      <div className='flex flex-shrink-0 items-center gap-2'>
+        <Skeleton className='h-[32px] w-[72px] rounded-md' />
+        <Skeleton className='h-[32px] w-[64px] rounded-md' />
+      </div>
     </div>
   )
 }
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 32823978561..3897943e03b 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
@@ -1,46 +1,75 @@
 import { Skeleton } from '@/components/emcn'
 
-const GRID_COLS = 'grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_auto] items-center'
+const GRID_COLS = 'grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_auto_auto] items-center'
+const COL_SPAN_ALL = 'col-span-5'
 
 /**
- * Skeleton component for a single secret row in the grid layout.
+ * Skeleton for a single integration credential row.
  */
 export function CredentialSkeleton() {
   return (
-    <div className={GRID_COLS}>
+    <div className='flex items-center justify-between gap-3'>
+      <div className='flex min-w-0 items-center gap-2.5'>
+        <Skeleton className='h-8 w-8 flex-shrink-0 rounded-md' />
+        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+          <Skeleton className='h-4 w-[120px] rounded' />
+          <Skeleton className='h-3.5 w-[160px] rounded' />
+        </div>
+      </div>
+      <div className='flex flex-shrink-0 items-center gap-1'>
+        <Skeleton className='h-9 w-[60px] rounded-md' />
+        <Skeleton className='h-9 w-[88px] rounded-md' />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Skeleton for a single secret row matching the credentials grid layout.
+ */
+function CredentialRowSkeleton() {
+  return (
+    <div className='contents'>
       <Skeleton className='h-9 rounded-md' />
       <div />
       <Skeleton className='h-9 rounded-md' />
-      <div className='ml-2 flex items-center gap-0'>
-        <Skeleton className='h-9 w-9 rounded-md' />
-        <Skeleton className='h-9 w-9 rounded-md' />
-      </div>
+      <Skeleton className='ml-2 h-9 w-[60px] rounded-md' />
+      <Skeleton className='h-9 w-9 rounded-md' />
     </div>
   )
 }
 
 /**
- * Skeleton for the Secrets section shown during dynamic import loading.
+ * Skeleton for the Credentials (Secrets) page shown during dynamic import loading.
  */
 export function CredentialsSkeleton() {
   return (
     <div className='flex h-full flex-col gap-4'>
+      {/* Search bar + Save button */}
       <div className='flex items-center gap-2'>
         <Skeleton className='h-[30px] flex-1 rounded-lg' />
-        <Skeleton className='h-[30px] w-[56px] rounded-md' />
         <Skeleton className='h-[30px] w-[50px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-2'>
-        <Skeleton className='h-5 w-[70px]' />
-        <div className='text-[var(--text-muted)] text-small'>
-          <Skeleton className='h-5 w-[160px]' />
+
+      {/* Scrollable content area */}
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-4'>
+          <div className={`${GRID_COLS} gap-y-2`}>
+            {/* Workspace section header */}
+            <Skeleton className={`${COL_SPAN_ALL} h-5 w-[70px]`} />
+            <CredentialRowSkeleton />
+            <CredentialRowSkeleton />
+
+            {/* Spacer matching the real component */}
+            <div className={`${COL_SPAN_ALL} h-[8px]`} />
+
+            {/* Personal section header */}
+            <Skeleton className={`${COL_SPAN_ALL} h-5 w-[55px]`} />
+            <CredentialRowSkeleton />
+            <CredentialRowSkeleton />
+          </div>
         </div>
       </div>
-      <div className='flex flex-col gap-2'>
-        <Skeleton className='h-5 w-[55px]' />
-        <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 93f2895d768..6fe69f3630c 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
@@ -7,11 +7,11 @@ export function CustomToolSkeleton() {
   return (
     <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <Skeleton className='h-[14px] w-[100px]' />
-        <Skeleton className='h-[13px] w-[200px]' />
+        <Skeleton className='h-4 w-[100px]' />
+        <Skeleton className='h-3.5 w-[200px]' />
       </div>
       <div className='flex flex-shrink-0 items-center gap-2'>
-        <Skeleton className='h-[30px] w-[40px] rounded-sm' />
+        <Skeleton className='h-[30px] w-[52px] rounded-sm' />
         <Skeleton className='h-[30px] w-[54px] rounded-sm' />
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
index e58ef57af15..dae014f0bf4 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
@@ -11,10 +11,10 @@ export function GeneralSkeleton() {
         <Skeleton className='h-9 w-9 rounded-full' />
         <div className='flex flex-1 flex-col justify-center gap-[1px]'>
           <div className='flex items-center gap-2'>
-            <Skeleton className='h-5 w-24' />
+            <Skeleton className='h-4 w-24' />
             <Skeleton className='h-[10.5px] w-[10.5px]' />
           </div>
-          <Skeleton className='h-5 w-40' />
+          <Skeleton className='h-3.5 w-40' />
         </div>
       </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
index 70768951c2d..fc98f433d38 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
@@ -8,7 +8,7 @@ export function InboxTaskSkeleton() {
     <div className='flex flex-col gap-1 rounded-lg border border-[var(--border)] p-3'>
       <div className='flex items-center justify-between'>
         <Skeleton className='h-[14px] w-[200px]' />
-        <Skeleton className='h-[14px] w-[50px]' />
+        <Skeleton className='h-[12px] w-[50px]' />
       </div>
       <div className='flex items-center justify-between'>
         <Skeleton className='h-[12px] w-[140px]' />
@@ -20,36 +20,71 @@ export function InboxTaskSkeleton() {
 }
 
 /**
- * Skeleton for the full Inbox section shown during dynamic import loading.
+ * Skeleton for the full Inbox section shown while data is loading.
  */
 export function InboxSkeleton() {
   return (
     <div className='flex h-full flex-col gap-4.5'>
-      <Skeleton className='h-[32px] w-full rounded-lg' />
-      <Skeleton className='h-[20px] w-[140px] rounded-sm' />
-      <Skeleton className='h-[40px] w-full rounded-lg' />
-      <div className='flex flex-col gap-1.5'>
-        <Skeleton className='h-[14px] w-[100px]' />
-        <Skeleton className='h-[13px] w-[200px]' />
-        <Skeleton className='h-[40px] w-full rounded-lg' />
+      {/* InboxEnableToggle: label + description on left, switch on right */}
+      <div className='flex items-center justify-between'>
+        <div className='flex flex-col gap-0.5'>
+          <Skeleton className='h-[14px] w-[140px]' />
+          <Skeleton className='h-[13px] w-[260px]' />
+        </div>
+        <Skeleton className='h-[20px] w-[36px] rounded-full' />
       </div>
-      <div className='flex flex-col gap-1.5'>
-        <Skeleton className='h-[14px] w-[120px]' />
-        <Skeleton className='h-[13px] w-[250px]' />
-        <Skeleton className='h-[80px] w-full rounded-lg' />
+
+      {/* Border separator */}
+      <div className='border-[var(--border)] border-t' />
+
+      {/* InboxSettingsTab: two sections with gap-6 */}
+      <div className='flex flex-col gap-6'>
+        {/* Sim's email section */}
+        <div className='flex flex-col gap-1.5'>
+          <Skeleton className='h-[14px] w-[90px]' />
+          <div className='flex items-center justify-between'>
+            <Skeleton className='h-[13px] w-[200px]' />
+            <div className='flex items-center gap-1.5'>
+              <Skeleton className='h-[12px] w-[12px] rounded-sm' />
+              <Skeleton className='h-[12px] w-[12px] rounded-sm' />
+            </div>
+          </div>
+          <Skeleton className='h-9 w-full rounded-md' />
+        </div>
+
+        {/* Allowed senders section */}
+        <div className='flex flex-col gap-1.5'>
+          <Skeleton className='h-[14px] w-[110px]' />
+          <Skeleton className='h-[13px] w-[260px]' />
+          <div className='mt-1 overflow-hidden rounded-lg border border-[var(--border)]'>
+            <div className='px-3 py-2.5'>
+              <Skeleton className='h-[14px] w-[180px]' />
+            </div>
+            <div className='border-[var(--border)] border-t px-3 py-2.5'>
+              <Skeleton className='h-[14px] w-[160px]' />
+            </div>
+          </div>
+          <Skeleton className='mt-1 h-[32px] w-[100px] rounded-md' />
+        </div>
       </div>
+
+      {/* Border separator with Inbox heading */}
       <div className='border-[var(--border)] border-t pt-4'>
         <Skeleton className='h-[14px] w-[40px]' />
         <Skeleton className='mt-0.5 h-[13px] w-[220px]' />
       </div>
-      <div className='flex items-center gap-2'>
-        <Skeleton className='h-[30px] flex-1 rounded-lg' />
-        <Skeleton className='h-[30px] w-[100px] rounded-md' />
-      </div>
-      <div className='flex flex-col gap-1'>
-        <InboxTaskSkeleton />
-        <InboxTaskSkeleton />
-        <InboxTaskSkeleton />
+
+      {/* InboxTaskList: search bar + status filter */}
+      <div className='flex flex-col gap-3'>
+        <div className='flex items-center gap-2'>
+          <Skeleton className='h-[32px] flex-1 rounded-lg' />
+          <Skeleton className='h-[32px] w-[100px] rounded-md' />
+        </div>
+        <div className='flex flex-col gap-1'>
+          <InboxTaskSkeleton />
+          <InboxTaskSkeleton />
+          <InboxTaskSkeleton />
+        </div>
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx
new file mode 100644
index 00000000000..6fdbfbb9db7
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx
@@ -0,0 +1,43 @@
+import { Skeleton } from '@/components/emcn'
+
+/**
+ * Skeleton for a single integration row matching the flex card layout.
+ */
+function IntegrationItemSkeleton() {
+  return (
+    <div className='flex items-center justify-between gap-3'>
+      <div className='flex min-w-0 items-center gap-2.5'>
+        <Skeleton className='h-8 w-8 flex-shrink-0 rounded-md' />
+        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+          <Skeleton className='h-4 w-[120px]' />
+          <Skeleton className='h-3.5 w-[180px]' />
+        </div>
+      </div>
+      <div className='flex flex-shrink-0 items-center gap-1'>
+        <Skeleton className='h-8 w-[60px] rounded-md' />
+        <Skeleton className='h-8 w-[85px] rounded-md' />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Skeleton for the Integrations section shown during dynamic import loading.
+ */
+export function IntegrationsSkeleton() {
+  return (
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[100px] rounded-md' />
+      </div>
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-2'>
+          <IntegrationItemSkeleton />
+          <IntegrationItemSkeleton />
+          <IntegrationItemSkeleton />
+        </div>
+      </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 87b6f0ce01a..f32b4591c3e 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
@@ -9,10 +9,10 @@ export function McpServerSkeleton() {
     <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
         <div className='flex items-center gap-1.5'>
-          <Skeleton className='h-[14px] w-[100px]' />
-          <Skeleton className='h-[13px] w-[80px]' />
+          <Skeleton className='h-4 w-[100px]' />
+          <Skeleton className='h-3.5 w-[80px]' />
         </div>
-        <Skeleton className='h-[13px] w-[120px]' />
+        <Skeleton className='h-3.5 w-[120px]' />
       </div>
       <div className='flex flex-shrink-0 items-center gap-1'>
         <Skeleton className='h-[30px] w-[60px] rounded-sm' />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
index 58a62e1f52a..e6cf2de3306 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
@@ -5,7 +5,7 @@ import { Skeleton } from '@/components/emcn'
  */
 export function DeletedItemSkeleton() {
   return (
-    <div className='flex items-center gap-3 px-2 py-2'>
+    <div className='flex items-center gap-3 rounded-md px-2 py-2'>
       <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-[3px]' />
       <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
         <Skeleton className='h-[14px] w-[120px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
new file mode 100644
index 00000000000..1a8fab6a272
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
@@ -0,0 +1,36 @@
+import { Skeleton } from '@/components/emcn'
+import { DeletedItemSkeleton } from '@/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton'
+
+/**
+ * Skeleton component for the entire Recently Deleted settings section.
+ * Renders placeholder UI for the search bar, sort dropdown, tabs, and item list.
+ */
+export function RecentlyDeletedSkeleton() {
+  return (
+    <div className='flex h-full flex-col gap-4.5'>
+      {/* Search bar + sort dropdown row */}
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[190px] shrink-0 rounded-lg' />
+      </div>
+
+      {/* Tabs bar */}
+      <div className='relative flex gap-4 border-b border-[var(--border)] px-4'>
+        <Skeleton className='mb-2 h-[20px] w-[32px] rounded-sm' />
+        <Skeleton className='mb-2 h-[20px] w-[72px] rounded-sm' />
+        <Skeleton className='mb-2 h-[20px] w-[52px] rounded-sm' />
+        <Skeleton className='mb-2 h-[20px] w-[112px] rounded-sm' />
+        <Skeleton className='mb-2 h-[20px] w-[40px] rounded-sm' />
+      </div>
+
+      {/* Item list */}
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-2'>
+          <DeletedItemSkeleton />
+          <DeletedItemSkeleton />
+          <DeletedItemSkeleton />
+        </div>
+      </div>
+    </div>
+  )
+}

From 65f512b17e65a8e2986283ddc7ce26f9220cb509 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 4 Apr 2026 19:05:35 -0700
Subject: [PATCH 2/3] lint

---
 .../app/workspace/[workspaceId]/settings/[section]/settings.tsx | 2 +-
 .../components/recently-deleted/recently-deleted-skeleton.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
index 339655b467e..ddda31f2a41 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
@@ -18,8 +18,8 @@ import { GeneralSkeleton } from '@/app/workspace/[workspaceId]/settings/componen
 import { InboxSkeleton } from '@/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton'
 import { IntegrationsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton'
 import { McpSkeleton } from '@/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton'
-import { SkillsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/skills/skill-skeleton'
 import { RecentlyDeletedSkeleton } from '@/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton'
+import { SkillsSkeleton } from '@/app/workspace/[workspaceId]/settings/components/skills/skill-skeleton'
 import { WorkflowMcpServersSkeleton } from '@/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers-skeleton'
 import type { SettingsSection } from '@/app/workspace/[workspaceId]/settings/navigation'
 import {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
index 1a8fab6a272..37004b5e7f4 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
@@ -15,7 +15,7 @@ export function RecentlyDeletedSkeleton() {
       </div>
 
       {/* Tabs bar */}
-      <div className='relative flex gap-4 border-b border-[var(--border)] px-4'>
+      <div className='relative flex gap-4 border-[var(--border)] border-b px-4'>
         <Skeleton className='mb-2 h-[20px] w-[32px] rounded-sm' />
         <Skeleton className='mb-2 h-[20px] w-[72px] rounded-sm' />
         <Skeleton className='mb-2 h-[20px] w-[52px] rounded-sm' />

From b60987d20f4b2e677d87e493e1cd91ffa8d0e6d3 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 4 Apr 2026 19:11:50 -0700
Subject: [PATCH 3/3] =?UTF-8?q?fix(settings):=20address=20PR=20feedback=20?=
 =?UTF-8?q?=E2=80=94=20deduplicate=20skeleton,=20fix=20import=20order,=20r?=
 =?UTF-8?q?emove=20inline=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/admin/admin-skeleton.tsx       |  8 ------
 .../components/api-keys/api-key-skeleton.tsx  |  5 ----
 .../credentials/credential-skeleton.tsx       |  5 ----
 .../components/inbox/inbox-skeleton.tsx       |  7 -----
 .../integrations/integrations-skeleton.tsx    | 28 +++----------------
 .../recently-deleted-skeleton.tsx             |  3 --
 6 files changed, 4 insertions(+), 52 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
index 7d59942f89e..5115edac650 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
@@ -7,7 +7,6 @@ import { Skeleton } from '@/components/emcn'
 export function AdminSkeleton() {
   return (
     <div className='flex h-full flex-col gap-6'>
-      {/* Super admin mode toggle */}
       <div className='flex items-center justify-between'>
         <Skeleton className='h-[14px] w-[120px]' />
         <Skeleton className='h-[20px] w-[36px] rounded-full' />
@@ -15,7 +14,6 @@ export function AdminSkeleton() {
 
       <div className='h-px bg-[var(--border-secondary)]' />
 
-      {/* Workflow import section */}
       <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[340px]' />
         <div className='flex gap-2'>
@@ -26,19 +24,15 @@ export function AdminSkeleton() {
 
       <div className='h-px bg-[var(--border-secondary)]' />
 
-      {/* User management section */}
       <div className='flex flex-col gap-3'>
         <Skeleton className='h-[14px] w-[120px]' />
 
-        {/* Search input + button */}
         <div className='flex gap-2'>
           <Skeleton className='h-9 flex-1 rounded-md' />
           <Skeleton className='h-9 w-[80px] rounded-md' />
         </div>
 
-        {/* Table */}
         <div className='flex flex-col gap-0.5'>
-          {/* Column headers */}
           <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2'>
             <Skeleton className='h-[12px] w-[200px]' />
             <Skeleton className='h-[12px] flex-1' />
@@ -47,7 +41,6 @@ export function AdminSkeleton() {
             <Skeleton className='h-[12px] w-[250px]' />
           </div>
 
-          {/* Table rows */}
           {Array.from({ length: 5 }).map((_, i) => (
             <div
               key={i}
@@ -66,7 +59,6 @@ export function AdminSkeleton() {
           ))}
         </div>
 
-        {/* Pagination */}
         <div className='flex items-center justify-between'>
           <Skeleton className='h-[14px] w-[160px]' />
           <div className='flex gap-1'>
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 905be870655..a4131c5cb77 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
@@ -24,22 +24,18 @@ export function ApiKeySkeleton() {
 export function ApiKeysSkeleton() {
   return (
     <div className='flex h-full flex-col gap-4.5'>
-      {/* Search bar and Create button */}
       <div className='flex items-center gap-2'>
         <Skeleton className='h-[38px] flex-1 rounded-lg' />
         <Skeleton className='h-[38px] w-[90px] rounded-md' />
       </div>
 
-      {/* Scrollable content area */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
         <div className='flex flex-col gap-4.5'>
-          {/* Workspace section */}
           <div className='flex flex-col gap-2'>
             <Skeleton className='h-5 w-[80px]' />
             <Skeleton className='h-5 w-[180px]' />
           </div>
 
-          {/* Personal section */}
           <div className='flex flex-col gap-2'>
             <Skeleton className='h-5 w-[60px]' />
             <ApiKeySkeleton />
@@ -48,7 +44,6 @@ export function ApiKeysSkeleton() {
         </div>
       </div>
 
-      {/* Bottom toggle section */}
       <div className='mt-6 flex items-center justify-between'>
         <div className='flex items-center gap-2'>
           <Skeleton className='h-5 w-[170px]' />
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 3897943e03b..c6812a3d2de 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
@@ -45,25 +45,20 @@ function CredentialRowSkeleton() {
 export function CredentialsSkeleton() {
   return (
     <div className='flex h-full flex-col gap-4'>
-      {/* Search bar + Save button */}
       <div className='flex items-center gap-2'>
         <Skeleton className='h-[30px] flex-1 rounded-lg' />
         <Skeleton className='h-[30px] w-[50px] rounded-md' />
       </div>
 
-      {/* Scrollable content area */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
         <div className='flex flex-col gap-4'>
           <div className={`${GRID_COLS} gap-y-2`}>
-            {/* Workspace section header */}
             <Skeleton className={`${COL_SPAN_ALL} h-5 w-[70px]`} />
             <CredentialRowSkeleton />
             <CredentialRowSkeleton />
 
-            {/* Spacer matching the real component */}
             <div className={`${COL_SPAN_ALL} h-[8px]`} />
 
-            {/* Personal section header */}
             <Skeleton className={`${COL_SPAN_ALL} h-5 w-[55px]`} />
             <CredentialRowSkeleton />
             <CredentialRowSkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
index fc98f433d38..1948ccb1146 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
@@ -25,7 +25,6 @@ export function InboxTaskSkeleton() {
 export function InboxSkeleton() {
   return (
     <div className='flex h-full flex-col gap-4.5'>
-      {/* InboxEnableToggle: label + description on left, switch on right */}
       <div className='flex items-center justify-between'>
         <div className='flex flex-col gap-0.5'>
           <Skeleton className='h-[14px] w-[140px]' />
@@ -34,12 +33,9 @@ export function InboxSkeleton() {
         <Skeleton className='h-[20px] w-[36px] rounded-full' />
       </div>
 
-      {/* Border separator */}
       <div className='border-[var(--border)] border-t' />
 
-      {/* InboxSettingsTab: two sections with gap-6 */}
       <div className='flex flex-col gap-6'>
-        {/* Sim's email section */}
         <div className='flex flex-col gap-1.5'>
           <Skeleton className='h-[14px] w-[90px]' />
           <div className='flex items-center justify-between'>
@@ -52,7 +48,6 @@ export function InboxSkeleton() {
           <Skeleton className='h-9 w-full rounded-md' />
         </div>
 
-        {/* Allowed senders section */}
         <div className='flex flex-col gap-1.5'>
           <Skeleton className='h-[14px] w-[110px]' />
           <Skeleton className='h-[13px] w-[260px]' />
@@ -68,13 +63,11 @@ export function InboxSkeleton() {
         </div>
       </div>
 
-      {/* Border separator with Inbox heading */}
       <div className='border-[var(--border)] border-t pt-4'>
         <Skeleton className='h-[14px] w-[40px]' />
         <Skeleton className='mt-0.5 h-[13px] w-[220px]' />
       </div>
 
-      {/* InboxTaskList: search bar + status filter */}
       <div className='flex flex-col gap-3'>
         <div className='flex items-center gap-2'>
           <Skeleton className='h-[32px] flex-1 rounded-lg' />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx
index 6fdbfbb9db7..223c274568d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx
@@ -1,25 +1,5 @@
 import { Skeleton } from '@/components/emcn'
-
-/**
- * Skeleton for a single integration row matching the flex card layout.
- */
-function IntegrationItemSkeleton() {
-  return (
-    <div className='flex items-center justify-between gap-3'>
-      <div className='flex min-w-0 items-center gap-2.5'>
-        <Skeleton className='h-8 w-8 flex-shrink-0 rounded-md' />
-        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-          <Skeleton className='h-4 w-[120px]' />
-          <Skeleton className='h-3.5 w-[180px]' />
-        </div>
-      </div>
-      <div className='flex flex-shrink-0 items-center gap-1'>
-        <Skeleton className='h-8 w-[60px] rounded-md' />
-        <Skeleton className='h-8 w-[85px] rounded-md' />
-      </div>
-    </div>
-  )
-}
+import { CredentialSkeleton } from '@/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton'
 
 /**
  * Skeleton for the Integrations section shown during dynamic import loading.
@@ -33,9 +13,9 @@ export function IntegrationsSkeleton() {
       </div>
       <div className='min-h-0 flex-1 overflow-y-auto'>
         <div className='flex flex-col gap-2'>
-          <IntegrationItemSkeleton />
-          <IntegrationItemSkeleton />
-          <IntegrationItemSkeleton />
+          <CredentialSkeleton />
+          <CredentialSkeleton />
+          <CredentialSkeleton />
         </div>
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
index 37004b5e7f4..59846faac9a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx
@@ -8,13 +8,11 @@ import { DeletedItemSkeleton } from '@/app/workspace/[workspaceId]/settings/comp
 export function RecentlyDeletedSkeleton() {
   return (
     <div className='flex h-full flex-col gap-4.5'>
-      {/* Search bar + sort dropdown row */}
       <div className='flex items-center gap-2'>
         <Skeleton className='h-[30px] flex-1 rounded-lg' />
         <Skeleton className='h-[30px] w-[190px] shrink-0 rounded-lg' />
       </div>
 
-      {/* Tabs bar */}
       <div className='relative flex gap-4 border-[var(--border)] border-b px-4'>
         <Skeleton className='mb-2 h-[20px] w-[32px] rounded-sm' />
         <Skeleton className='mb-2 h-[20px] w-[72px] rounded-sm' />
@@ -23,7 +21,6 @@ export function RecentlyDeletedSkeleton() {
         <Skeleton className='mb-2 h-[20px] w-[40px] rounded-sm' />
       </div>
 
-      {/* Item list */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
         <div className='flex flex-col gap-2'>
           <DeletedItemSkeleton />