fix: three UX polish fixes — modal auto-close, waitlist persistence, skeleton flash - #207
Conversation
When anonymous users triggered the sign-in modal via gated features like session_limit, algorithm_lock, or category_controls, the modal stayed open after successful Google authentication because those trigger paths did not set pendingFeatureRef.current. The auto-close effect now unconditionally dismisses the modal when isAuthenticated becomes true, while still auto-opening the pending feature (sound, fullscreen, export, code, insight) when one was set.
…r link Migrate waitlist banner dismissal and enrollment flags from sessionStorage to localStorage so they persist across browser sessions. Users who dismissed the banner or joined the waitlist will no longer see it reappear after closing the tab. Also adds a 'Pro Plan' link in the footer bottom bar alongside Privacy Policy and Terms of Use, giving users a persistent way to navigate to the /pro page. - waitlistService: persistWaitlistEmail/readStoredWaitlistEmail now use localStorage with sessionStorage migration fallback - ProWaitlistBanner: dismissal flag reads/writes to localStorage with sessionStorage migration fallback - Footer: new 'Pro Plan' link in bottom bar (en/fr/ar) - Tests: updated assertions to localStorage, added migration fallback tests for both banner and service
When an authenticated user visits the landing page, the auth hydration window briefly shows a pulsing skeleton circle in the header before hideAvatar hides it. Adding !hideAvatar to the skeleton condition prevents this flash on pages that don't display the avatar.
|
Warning Review limit reached
Next review available in: 45 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: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughThe PR adds a localized Pro Plan footer link, migrates waitlist state from sessionStorage to localStorage with fallback migration, suppresses a UserMenu loading skeleton when avatars are hidden, and refines authenticated gated-feature handling. ChangesPro waitlist and navigation
User menu loading behavior
Visualizer authentication gating
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
Preview for Bayan Flow Staging ready!
Preview alias |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/UserMenu.test.jsx (1)
55-68: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAlso assert the unauthenticated fallback is rendered.
This test would still pass if
UserMenuincorrectly returnednull; assert the expected sign-in button alongside the skeleton’s absence so the loading-path behavior remains covered.🤖 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 `@src/components/UserMenu.test.jsx` around lines 55 - 68, Add an assertion in the “does not show loading skeleton when hideAvatar is true” test that verifies the unauthenticated sign-in button is rendered, while retaining the existing assertion that no loading skeleton appears.
🤖 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.
Inline comments:
In `@src/components/Footer.jsx`:
- Around line 291-299: Replace the Pro Plan motion button in Footer.jsx with the
project’s router link element targeting /pro, preserving its existing visual
styling and click behavior. In Footer.test.jsx, render and assert the entry
using getByRole('link', { name: i18n.t('footer.proPlan') }) and perform click
assertions through that link role.
In `@src/services/waitlistService.js`:
- Around line 46-51: Preserve sessionStorage fallback across all four storage
paths: in src/services/waitlistService.js lines 46-51, update
persistWaitlistEmail to write to sessionStorage when localStorage fails; in
lines 57-70, isolate localStorage and sessionStorage errors and return the
legacy value even when migration cannot write; in
src/components/ProWaitlistBanner.jsx lines 26-45, continue reading
sessionStorage after localStorage access fails; and in lines 59-66, fall back to
sessionStorage when dismissal persistence fails. Keep localStorage as the
primary store.
---
Nitpick comments:
In `@src/components/UserMenu.test.jsx`:
- Around line 55-68: Add an assertion in the “does not show loading skeleton
when hideAvatar is true” test that verifies the unauthenticated sign-in button
is rendered, while retaining the existing assertion that no loading skeleton
appears.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: b08c75c0-2f1a-4c75-af7b-b081c2e26c24
📒 Files selected for processing (12)
src/components/Footer.jsxsrc/components/Footer.test.jsxsrc/components/ProWaitlistBanner.jsxsrc/components/ProWaitlistBanner.test.jsxsrc/components/UserMenu.jsxsrc/components/UserMenu.test.jsxsrc/i18n/locales/ar/translation.jsonsrc/i18n/locales/en/translation.jsonsrc/i18n/locales/fr/translation.jsonsrc/pages/VisualizerApp.jsxsrc/services/waitlistService.jssrc/services/waitlistService.test.js
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
1 participant
Contribution workflow
develop: This PR targetsdevelop, not `main**.Description
Three small UX polish fixes that address annoyances for signed-in and returning users:
pendingFeatureRef.current(e.g. session_limit, algorithm_lock, speed_control).sessionStorage, which clears when the tab closes. Migrated tolocalStoragewith backward-compatible migration fallback.Type of Change
Related Issues
None (polish fixes identified during UX review).
Changes Made
SignInPromptModalon successful auth regardless of whetherpendingFeatureRef.currentis setpersistWaitlistEmail/readStoredWaitlistEmailfromsessionStoragetolocalStoragewith migration fallbacksessionStoragetolocalStoragewith migration fallback!hideAvatarto skeleton condition inUserMenuhideAvatar/prolink navigationTesting
Test Results
ProWaitlistBanner (9), waitlistService (10), Footer (5), UserMenu (11), SignInPromptModal (13), VisualizerApp (27) — all passing.
Code Quality
Breaking Changes
Checklist
Summary by CodeRabbit