fix(settings): address PR feedback — deduplicate skeleton, fix import order, remove inline comments

Author: waleedlatif1

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

@@ -7,15 +7,13 @@ 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' />
       </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'>
@@ -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'>

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

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

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

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>

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