refactor(mosaic): remove skeleton state from Section by alexcarpenter · Pull Request #10325 · clerk/javascript · GitHub
Skip to content

refactor(mosaic): remove skeleton state from Section - #10325

Open
alexcarpenter wants to merge 2 commits into
mainfrom
carp/mosaic-skeleton-cleanup
Open

refactor(mosaic): remove skeleton state from Section#10325
alexcarpenter wants to merge 2 commits into
mainfrom
carp/mosaic-skeleton-cleanup

Conversation

@alexcarpenter

@alexcarpenter alexcarpenter commented Oct 20, 2026

Copy link
Copy Markdown
Member

Description

Stacked on #10323. Removes the old skeleton approach (greying out the real view with Section.Group skeleton) now that skeletons are separate <feature>.skeleton.tsx components swapped in by whatever owns the loading state.

  • Section.Group no longer takes skeleton, and no longer makes itself inert / aria-hidden or provides skeleton context. It always renders as role='group'.
  • SkeletonContext is removed. Skeleton always shows unless show={false}.
  • The active devices skeleton drops its show props and its wrapper div.
  • Swingset: the Section Loading story now swaps a separate skeleton for the loaded section, keeping the title as real text. The Section and Skeleton docs match.
  • docs/skeletons.md describes the intended usage: a separate skeleton component, real text for known titles, bones only for fetched content, and fallback only while Clerk loads.

No @clerk/mosaic exports change.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercel Bot commented Oct 20, 2026 •
edited
Loading

Copy link
Copy Markdown

@coderabbitai

coderabbitai Bot commented Oct 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository YAML (base), Organization UI (inherited)
  • Review profile: ASSERTIVE
  • Plan: Team
  • Run ID: fc8788a5-9a94-4621-9b6b-022dd25aadb2
📥 Commits

Reviewing files that changed from the base of the PR and between b0b10f3 and 3258279.

📒 Files selected for processing: 17
  • .changeset/mosaic-active-devices-skeleton.md
  • .changeset/silver-paws-hang.md
  • packages/mosaic/docs/skeletons.md
  • packages/mosaic/src/components/section/section.test.tsx
  • packages/mosaic/src/components/section/section.tsx
  • packages/mosaic/src/components/skeleton/index.ts
  • packages/mosaic/src/components/skeleton/skeleton.test.tsx
  • packages/mosaic/src/components/skeleton/skeleton.tsx
  • packages/mosaic/src/features/user-profile/user-profile-active-devices-section/__tests__/user-profile-active-devices-section.feature.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-active-devices-section/__tests__/user-profile-device-actions.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-active-devices-section/user-profile-active-devices-section.model.ts
  • packages/mosaic/src/features/user-profile/user-profile-active-devices-section/user-profile-active-devices-section.skeleton.tsx
  • packages/mosaic/src/features/user-profile/user-profile-active-devices-section/user-profile-active-devices-section.tsx
  • packages/mosaic/src/features/user-profile/user-profile-active-devices-section/user-profile-active-devices-section.view.tsx
  • packages/swingset/src/stories/section.mdx
  • packages/swingset/src/stories/section.stories.tsx
  • packages/swingset/src/stories/skeleton.mdx
🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

💤 Files with no reviewable changes: 2
  • packages/mosaic/src/components/section/section.test.tsx
  • packages/mosaic/src/features/user-profile/user-profile-active-devices-section/tests/user-profile-device-actions.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 2 remain after this review.

📝 Walkthrough

The changes remove context-based visibility inheritance from Skeleton and skeleton rendering support from Section.Group. The active-devices model now distinguishes device loading from general loading and renders a dedicated skeleton until device data is ready. Tests cover loading, remounting, and session changes. Documentation and stories describe separate skeleton and loaded views, placeholder content, and status announcements.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Merge Risk: ⚪ Minimal · up to 32582

The loading-state refactor is mergeable after normal checks; no concrete remaining compatibility issue was found.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 10 files. (5 skipped: 5… Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Title check Passed The title clearly and concisely describes the primary change: removing skeleton state from Section.
Description check Passed The description directly explains the removal of the legacy Section skeleton approach and the related Mosaic, active-devices, Swingset, and documentation changes.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 10 files. (5 skipped: 5 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

✨ Finishing Touches: 💡 1
⚔️ Resolve merge conflicts: 💡
  • Resolve merge conflict in branch carp/mosaic-skeleton-cleanup
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Linked repositories: Some configured repositories could not be included in this review. Cross-repository analysis may be incomplete. Please check linked-repository access and settings.

Comment @coderabbitai help to get the list of available commands.

@changeset-bot

changeset-bot Bot commented Oct 20, 2026

Copy link
Copy Markdown

Base automatically changed from carp/mosaic-active-devices-skeleton to main October 21, 2026 20:06
@alexcarpenter
alexcarpenter marked this pull request as ready for review October 21, 2026 20:06
@alexcarpenter alexcarpenter mentioned this pull request Oct 21, 2026
Open
3 of 9 tasks

This branch was successfully deployed

2 active deployments
Preview – swingset — 32582795 Deployed Oct 20, 2026 by vercel[bot]
View deployment
Preview – clerk-js-sandbox — 32582795 Deployed Oct 20, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@maxyinger maxyinger Awaiting requested review from maxyinger

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

mosaic

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@alexcarpenter