fix(front): settings skeleton, app-detail header & empty favorites#21209
Merged
Conversation
The settings redesign (#21131) moved the page chrome into a single rounded card (SettingsPageLayout: a bordered header with breadcrumb and centered title, an optional secondary bar, and the 760px body). The loading skeleton was never updated, so it still rendered the old flat PageHeader + PageBody — every settings page loaded as a full-width flat bar and then snapped into the bordered card. Rebuild SettingsSkeletonLoader to mirror the card chrome by reusing the real SettingsPageHeader and SettingsPageContainer, and compose it with the existing SettingsSectionSkeletonLoader so the loading body is identical whether or not chrome is already present: - SettingsSkeletonLoader = card chrome + SettingsSectionSkeletonLoader. Used when no settings chrome is on screen yet: the route-level Suspense fallback, or a page whose data-dependent title/breadcrumb can't render until its data has loaded. - SettingsSectionSkeletonLoader = body only. Used for loading states inside an already-rendered page; the admin Enterprise tab now uses it, matching its sibling admin tabs instead of nesting a second card. Document the rule on both components so they stay one composed pattern.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
SettingsApplicationDetails and SettingsAvailableApplicationDetails passed a custom SettingsApplicationDetailTitle (avatar + name + multi-line description block, fixed at OBJECT_SETTINGS_WIDTH) into SettingsPageLayout's title slot. That slot is the centered, single-line title of the rounded-card header, so the block overflowed and broke the header layout. Pass the application's display name as the title, like every other settings page. The available-app "unlisted" notice moves into the page body as an InlineBanner so it is preserved. SettingsApplicationDetailTitle is now unused and removed.
Always rendering the section (#21087) left a stray "Favorites" title above the Workspace section for users with no favorites. Render the section only when at least one favorite exists, and drop the now-redundant per-child emptiness guards.
FelixMalfait
commented
Jun 4, 2026
FelixMalfait
changed the title
🔍 Automated Pre-Review✅ No issues detected - This PR is ready for human review. Automated pre-review — human approval still required. |
Per review feedback.
|
🚀 Preview Environment Ready! Your preview environment is available at: https://mailed-timely-using-suffering.trycloudflare.com This environment will automatically shut down after 5 hours. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three small post-redesign UI fixes. Each is an independent commit, so they can be split into separate PRs if preferred.
1. Settings loading skeleton — match the rounded-card layout
The redesign (#21131) moved settings chrome into a rounded card (
SettingsPageLayout: bordered header with breadcrumb + centered title, optional secondary bar, 760px body), butSettingsSkeletonLoaderstill rendered the old flatPageHeader+PageBody— so pages painted as a full-width flat bar then snapped into the card.SettingsSkeletonLoadernow reproduces the card and reuses the realSettingsPageHeader+SettingsPageContainer, so the frame aligns by construction; the card CSS is replicated (notSettingsPageLayout) to avoid the layout's side effects (hotkeys, side panel, info banner).SettingsSectionSkeletonLoaderso the loading body is identical whether or not chrome is present. Rule: no chrome on screen yet → full-page skeleton; chrome already on screen → body-onlySettingsSectionSkeletonLoader(the admin Enterprise tab now uses it, matching its sibling tabs). A short comment on each component documents this.2. Application detail header — pass a plain title
SettingsApplicationDetails/SettingsAvailableApplicationDetailspassed a customSettingsApplicationDetailTitle(avatar + name + multi-line description, fixed width) intoSettingsPageLayout's centered single-line title slot, which broke the header. They now pass the app's display name like every other page. The available-app "unlisted" notice moves into the body as a reusableInlineBanner; the now-unusedSettingsApplicationDetailTitleis removed.3. Navigation — hide Favorites when empty
Always rendering the Favorites section (#21087) left a stray "Favorites" title above Workspace for users with no favorites. It now renders only when at least one favorite exists (redundant per-child guards dropped). Note: the "+ add favorite" entry point therefore appears once you have ≥1 favorite; the first favorite is created from a record/view as before.
Verification
nx typecheck twenty-front✅ ·oxlint+oxfmt --checkon changed files ✅