fix(onboarding): verify-socials renders a skeleton while the roster loads (chat#1889 row 11)#1893
fix(onboarding): verify-socials renders a skeleton while the roster loads (chat#1889 row 11)#1893sweetmantech wants to merge 1 commit into
Conversation
…oads chat#1889 matrix row 11. VerifySocialsStep destructured only `sorted` from useArtistProvider, so a direct /setup/socials visit — the welcome email's step 2 link — rendered an empty step with a live "Looks good, continue" button until the roster arrived. It read as broken, and continuing early skipped socials the user never saw. Mirrors ConfirmRosterStep: read isLoading, render skeletons, and hold the continue button until the roster resolves. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 35 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 41babbe681
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| ))} | ||
| {isLoading ? ( | ||
| <> | ||
| <Skeleton className="h-[104px] w-full rounded-xl" /> |
There was a problem hiding this comment.
On a direct /setup/socials visit while the roster is pending, these Skeleton components render as empty, non-semantic <div> elements and the continue button is removed, so screen-reader users receive no indication that content is loading and still encounter an apparently blank step. Add an accessible status announcement, such as a visually hidden message in a live region, while keeping the decorative skeletons hidden from assistive technology.
AGENTS.md reference: AGENTS.md:L74-L78
Useful? React with 👍 / 👎.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 2 files
Confidence score: 4/5
- In
components/Onboarding/VerifySocialsStep.tsx, the loading state shows only visualSkeletonelements and removes the continue button without announcing progress, so screen-reader users on/setup/socialsmay experience a silent, confusing dead-end during load — add an accessible loading announcement (for example viaaria-busy/live region text) and keep a perceivable status message until content is ready.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="components/Onboarding/VerifySocialsStep.tsx">
<violation number="1" location="components/Onboarding/VerifySocialsStep.tsx:40">
P2: The loading branch renders decorative `Skeleton` divs and hides the continue button, but provides no indication to assistive technology that content is loading. Screen-reader users visiting `/setup/socials` directly will encounter an apparently blank step with no actionable elements and no status announcement.
Consider adding a visually-hidden live-region message (e.g., `<span role="status" className="sr-only">Loading roster…</span>`) alongside the skeletons, and marking the skeletons themselves with `aria-hidden="true"` so they don't pollute the accessibility tree.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| ))} | ||
| {isLoading ? ( | ||
| <> | ||
| <Skeleton className="h-[104px] w-full rounded-xl" /> |
There was a problem hiding this comment.
P2: The loading branch renders decorative Skeleton divs and hides the continue button, but provides no indication to assistive technology that content is loading. Screen-reader users visiting /setup/socials directly will encounter an apparently blank step with no actionable elements and no status announcement.
Consider adding a visually-hidden live-region message (e.g., <span role="status" className="sr-only">Loading roster…</span>) alongside the skeletons, and marking the skeletons themselves with aria-hidden="true" so they don't pollute the accessibility tree.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At components/Onboarding/VerifySocialsStep.tsx, line 40:
<comment>The loading branch renders decorative `Skeleton` divs and hides the continue button, but provides no indication to assistive technology that content is loading. Screen-reader users visiting `/setup/socials` directly will encounter an apparently blank step with no actionable elements and no status announcement.
Consider adding a visually-hidden live-region message (e.g., `<span role="status" className="sr-only">Loading roster…</span>`) alongside the skeletons, and marking the skeletons themselves with `aria-hidden="true"` so they don't pollute the accessibility tree.</comment>
<file context>
@@ -29,19 +35,28 @@ const VerifySocialsStep = ({ onConfirmed }: { onConfirmed: () => void }) => {
- ))}
+ {isLoading ? (
+ <>
+ <Skeleton className="h-[104px] w-full rounded-xl" />
+ <Skeleton className="h-[104px] w-full rounded-xl" />
+ </>
</file context>
1 participant
Matrix row 11 in chat#1889. Small, independent of every other row.
Why
VerifySocialsStepdestructured only{ sorted }fromuseArtistProvider— noisLoading. So a direct visit to/setup/socials(the welcome email's step 2 link) rendered:until the roster arrived. It read as broken, and a user who clicked through early skipped verifying socials they never saw.
What changed
Mirrors the sibling
ConfirmRosterStep: readisLoading, render two skeletons, and hold the continue button until the roster resolves.Verification
TDD, red → green:
```
RED — no skeleton while loading, continue button already live
× renders a loading skeleton instead of an empty step while the roster loads
Tests 1 failed | 1 passed (2)
GREEN
pnpm exec vitest run components/Onboarding
Test Files passed
Tests passed
```
The second test guards the other direction — no skeletons once resolved, continue button present — so this can't regress into a permanent skeleton.
pnpm exec tsc --noEmitclean for the touched file. Preview click-through pending.Tracked in chat#1889 (matrix row 11).
Summary by cubic
Fixes the onboarding socials step by showing loading skeletons while the roster loads and delaying the continue button until ready. Prevents an empty step and early skip when visiting
/setup/socialsdirectly (chat#1889, row 11).VerifySocialsStepnow readsisLoadingfromuseArtistProvider, renders twoSkeletons, and only shows the "Looks good — continue" button when not loading (mirrorsConfirmRosterStep).Written for commit 41babbe. Summary will update on new commits.