fix(settings): align skeleton loading states with actual page layouts

[waleedlatif1]

Summary

• Created dedicated IntegrationsSkeleton — was incorrectly reusing grid-based CredentialsSkeleton for a flex-card layout
• Created RecentlyDeletedSkeleton with search, tabs, and scroll container — was using generic fallback
• Rewrote AdminSkeleton with full table/pagination structure — was a single placeholder box
• Fixed CredentialsSkeleton to match actual 5-column grid with section headers
• Fixed ApiKeysSkeleton to include section headers and bottom toggle
• Fixed InboxSkeleton with proper enable toggle, settings tab, and sender list structure
• Fixed text heights, button widths, and gaps across all skeleton components

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[cursor]

PR Summary

Low Risk
Low risk UI-only changes that adjust loading skeleton components and dynamic import fallbacks without modifying settings data flows or permissions logic.

Overview
Improves settings loading UX by replacing generic/mismatched skeleton fallbacks with section-specific skeletons.

Adds new IntegrationsSkeleton and RecentlyDeletedSkeleton and wires them into settings.tsx dynamic imports, and significantly refines existing skeletons (Admin, API keys, Credentials, Inbox, BYOK, MCP server, custom tools, general) to better match real layouts, including scroll containers, headers, toggles, and table-like structures.

^{Reviewed by Cursor Bugbot for commit b60987d. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Apr 5, 2026 2:11am

[greptile-apps]

Greptile Summary

This PR fixes mismatched skeleton loading states across the settings panel. Several sections were showing placeholder UIs that didn't match their actual layouts — most notably, the Integrations section was reusing the grid-based CredentialsSkeleton despite having a flex-card layout, and the Recently Deleted section fell back to a generic single-box placeholder.

• IntegrationsSkeleton (new): flex-column layout reusing CredentialSkeleton rows — correctly reflects the integrations list structure
• RecentlyDeletedSkeleton (new): includes search bar, sort dropdown, five tab skeletons, and a scrollable DeletedItemSkeleton list
• AdminSkeleton (rewritten): full table with column headers, 5 data rows (each with badges and action buttons), search bar, and pagination row
• CredentialsSkeleton: updated to a 5-column grid with two labelled section groups; CredentialSkeleton (single row) is now a separate named export for reuse by IntegrationsSkeleton
• ApiKeysSkeleton: now includes workspace/personal section headers and a bottom toggle row
• InboxSkeleton: expanded with enable toggle, email settings panel with sender list, and tasks section
• Pixel heights (h-[14px], h-[13px]) converted to standard Tailwind scale (h-4, h-3.5) in custom-tool-skeleton, general-skeleton, and mcp-server-skeleton
• Previous review comments about non-TSDoc JSX comments and import ordering have been fully addressed

Confidence Score: 5/5

Safe to merge — all changes are pure UI polish with no logic, data flow, or state management impact

All 13 changed files are skeleton loading-state components. No logic, data fetching, or state management changes. Previous review concerns about non-TSDoc JSX comments and import ordering have been fully resolved. No P0 or P1 issues identified.

No files require special attention; all changes are presentational skeleton adjustments

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx	Wires IntegrationsSkeleton and RecentlyDeletedSkeleton to their dynamic imports; imports in correct alphabetical/group order
apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx	Rewrote AdminSkeleton with full table header, 5 data rows, search bar, and pagination structure matching the actual Admin component
apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx	Added workspace/personal section headers and bottom toggle row to ApiKeysSkeleton
apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx	No functional changes visible in diff
apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx	Unchanged; existing skeleton correctly structured
apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx	Refactored to export CredentialSkeleton (single row for reuse) and CredentialsSkeleton (5-column grid with section headers)
apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx	Converted pixel heights to standard Tailwind scale (h-4, h-3.5)
apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx	Converted pixel heights to standard Tailwind scale across all skeleton rows
apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx	Fixed InboxSkeleton with enable toggle, email settings panel with sender list, and tasks section
apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-skeleton.tsx	New file: IntegrationsSkeleton with flex layout reusing CredentialSkeleton rows and a search/button header
apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx	Converted pixel heights to standard Tailwind scale (h-4, h-3.5)
apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx	Added rounded-md to row container to match actual deleted-item card style
apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted-skeleton.tsx	New file: RecentlyDeletedSkeleton with search, sort dropdown, tab bar, and scrollable DeletedItemSkeleton list

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    S[settings.tsx\ndynamic imports] --> GS[GeneralSkeleton]
    S --> IS[IntegrationsSkeleton\n🆕 new]
    S --> CS[CredentialsSkeleton]
    S --> AS[AdminSkeleton\n♻️ rewritten]
    S --> AKS[ApiKeysSkeleton]
    S --> InS[InboxSkeleton]
    S --> RDS[RecentlyDeletedSkeleton\n🆕 new]
    S --> BYOK[BYOKSkeleton]
    S --> CT[CustomToolsSkeleton]
    S --> MCP[McpSkeleton]

    IS --> CrSk[CredentialSkeleton\nsingle-row component]
    CS --> CrSk
    CS --> CRS[CredentialRowSkeleton\ninternal]

    RDS --> DIS[DeletedItemSkeleton]
    InS --> ITS[InboxTaskSkeleton]

Loading

_{Reviews (2): Last reviewed commit: "fix(settings): address PR feedback — ded..." | Re-trigger Greptile}

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit b60987d. Configure here.}