fix(ui): Improve members notification badge loading experience#9187
fix(ui): Improve members notification badge loading experience#9187alexcarpenter wants to merge 2 commits into
Conversation
🦋 Changeset detectedLatest commit: 4a3f869 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
ApprovabilityVerdict: Approved UI-only change adding a Skeleton loading component to prevent layout shift in notification badges. Changes are purely presentational, self-contained to the UI package, with no backend or security implications. You can customize Macroscope's approvability policy. Learn more. |
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
API Changes Report
Summary
@clerk/uiCurrent version: 1.25.5 Subpath
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dismissing prior approval to re-evaluate 4a3f869
📝 WalkthroughWalkthroughAdds a shimmer-enabled ChangesSkeleton Badge Loading
Sequence Diagram(s)sequenceDiagram
participant OrganizationMembers
participant NotificationCountBadge
participant Skeleton
participant NotificationBadge
OrganizationMembers->>NotificationCountBadge: Pass tab count and loading state
alt Count is loading
NotificationCountBadge->>Skeleton: Render reserved placeholder
else Count is available
NotificationCountBadge->>NotificationBadge: Render formatted count
end
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/ui/src/elements/Skeleton.tsx (2)
20-20: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDeclare the component’s return type.
Skeletonis exported without an explicit return type, contrary to the TypeScript API guideline.Proposed fix
+import type { ReactElement } from 'react'; + -export const Skeleton = (props: SkeletonProps) => { +export const Skeleton = (props: SkeletonProps): ReactElement => {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/elements/Skeleton.tsx` at line 20, Update the exported Skeleton component declaration to include an explicit React return type, using the project’s established typing convention for components while preserving its existing props and rendering behavior.Source: Coding guidelines
11-19: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winComplete the generated-reference documentation for the Skeleton API.
packages/ui/src/elements/Skeleton.tsx#L11-L19: Add structured@param,@returns, and@exampleJSDoc if this component is exported from a public UI entry point.packages/ui/src/internal/appearance.ts#L649-L649: Document theskeletonappearance option and have the Docs team review the generated/object/**output.As per coding guidelines, “All public APIs must be documented with JSDoc.” As per path instructions, public JSDoc may render in generated Clerk Docs and “the Docs team may need to review the change.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/elements/Skeleton.tsx` around lines 11 - 19, The public Skeleton component lacks complete generated-reference documentation. In packages/ui/src/elements/Skeleton.tsx lines 11-19, add structured JSDoc with `@param`, `@returns`, and `@example` for the exported component, preserving the documented block, content, and show behaviors. In packages/ui/src/internal/appearance.ts line 649, document the skeleton appearance option and have the Docs team review the generated /object/** output.Sources: Coding guidelines, Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/ui/src/elements/Skeleton.tsx`:
- Line 20: Update the exported Skeleton component declaration to include an
explicit React return type, using the project’s established typing convention
for components while preserving its existing props and rendering behavior.
- Around line 11-19: The public Skeleton component lacks complete
generated-reference documentation. In packages/ui/src/elements/Skeleton.tsx
lines 11-19, add structured JSDoc with `@param`, `@returns`, and `@example` for the
exported component, preserving the documented block, content, and show
behaviors. In packages/ui/src/internal/appearance.ts line 649, document the
skeleton appearance option and have the Docs team review the generated
/object/** output.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: e082ca53-b48b-43a5-bd35-d101ce339218
📒 Files selected for processing (7)
.changeset/skeleton-members-badge-loading.mdpackages/ui/src/common/NotificationCountBadge.tsxpackages/ui/src/components/OrganizationProfile/OrganizationMembers.tsxpackages/ui/src/customizables/elementDescriptors.tspackages/ui/src/elements/Skeleton.tsxpackages/ui/src/internal/appearance.tspackages/ui/src/styledSystem/animations.ts
1 participant
Description
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Bug Fixes